どんどんバージョンが新しくなるので、検索で出てきた情報が使えなかったりと、結構ハマりました。とりあえず2017年9月時点で成功したやり方をまとめておきます。
- typings、DT使用しません。
- electron-prebuilt使用しません。
(TypeScript2ではtypingsとか不要って言ってるのに使ってるexample多すぎ！electron-prebuiltも！)
(ただし、この記事も怪しいので注意。こうして中途半端な日本語情報が増えていくのです。 公式サイトのDocumentを確認するのが結局は一番早くて確実です。)
この記事のゴール
環境
Visual Studio 2017
Visual Studio Installer にてnode.jsとTypeScriptを入れておく。
$ node -v
v6.11.2
$ npm -v
3.10.10
$ tsc -v
Version 2.4.1
TypeScriptは最新は2.5.xが出ているが、とりあえず2.4を使う。2.2だとビルドが通らなかった。
環境変数Pathも念のため、C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.4 に通しておいた。
手順
node.js (TypeScript) で新規作成して、初期のapp.ts等を全て削除する。
npmで必要なライブラリをinstallしていく。
$ npm install electron --save
$ npm install jquery@3.2.1 --save
$ npm install @types/jquery@3.2.1 --save
electron公式のやり方（どこで見たか忘れた）に則って、main と remoteというフォルダをプロジェクト直下に作成します。mainはサーバー側、remoteはクライアント側となります。
main/main.tsを作成して、以下をコピペ。公式サイトの記述をなるべくTypeScript的に直してみました。anyばっかりなのでかなり中途半端ですが。
/// <reference types="electron" />
// import electron
var electron = require('electron');
var app: Electron.App = electron.app;
var ipcMain: Electron.IpcMain = electron.ipcMain;
// import standard library
var url = require('url');
var http = require('http');
var fs = require('fs');
var path = require('path');
let mainWindow: Electron.BrowserWindow;
function createWindow() {
mainWindow = new electron.BrowserWindow({ width: 1200, height: 600 });
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '../remote/index.html'),
protocol: 'file:',
slashes: true
}));
// if you want use dev tools.
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
remoteの方にクライアント側を記述します。今後絶対使うと思ったのでjQueryの準備だけしておきました。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.jQuery = window.$ = require('../node_modules/jquery/dist/jquery.min.js');
</script>
<script src="./js/index.js"></script>
</head>
<body>
<span id="dummy">test</span>
</body>
</html>
※ ここでjQueryの読み込みをrequireを使っているのも最新のやり方ではないはずですが、試行錯誤してこれしか上手くいかなかった。もっと根本の仕組みを理解していないと辛い。
jsフォルダにindex.tsを記述します。こんな感じでクライアント側の記述をしていくよ、という準備。クリックイベントを適当に貼ってみました。
/// <reference types="jquery" />
$(function () {
$('#dummy').click(function() {
alert('Hello World!');
});
});
F5キーで実行した結果。
試しに、clickイベントをclickeとしてみると、ビルドエラーとなります。TypeScriptの型チェックのおかげです。
エラー TS2551: Build:プロパティ 'clicke' は型 'JQuery<HTMLElement>' に存在していません。候補: 'click'。
実行は出来るようになりましたが、ブレークポイントが貼れない…。これは後日調査します。
ポイント
- electron-prebuilt を使えといろんなサイトで言われていますが、electronで良い。electronだと最新が1.8.0(2017/8/31更新)ですが、electron-prebuiltだと1.4.13 (2016/12/20更新)が最新となっていて、現状ではelectronに統一されているようです。
- electronの型情報もそのままモジュールに入っている。
- jQueryは型情報を別で入れる必要がありましたが、jQueryは本体と@typesでバージョンを合わせる必要がありました。
- 当初、TypeScript2.2でビルドした際、@types/jqueryのindex.d.tsでビルドエラーになりました。 大量の
エラー TS2314: Build:ジェネリック型 'JQueryStatic<TElement, HTMLElement>' には 2 個の型引数が必要です。TypeScript 2.4だと問題なくビルドできました。(後から気づきましたが、index.d.tsのコメントにTypeScript 2.3の記述がありますね。2.3以降なら問題ないようです。) - typings等の型情報はTypeScript2 以降で
@typesを使用したやり方に代わりました。jQueryはそれに則ってます。 -
/// <reference path="../../node_modules/electron/index.d.ts" />ではなく/// <reference types="electron" />というシンプルな書き方が推奨されているようですが、どこを参照しているのかが明示的でなくなってしまいました。
参考
You can currently use either name, but electron is recommended, as the electron-prebuilt name is deprecated, and will only be published until the end of 2016.
https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html
https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html#consuming-dependencies
Don’t use
/// <reference path="..." />in your declaration files.
Do use/// <reference types="..." />instead.