Electron の QuickStart を速攻で Typescript にする

electron typescript

Electronが公式でTypescriptの型定義ファイルを同梱してくれたことにより、Typescript + Electron での開発スタートが簡単になった。

それを記念して、公式のQuickStartをサッとTypescript仕様に変えてしまいたい。

公式にあるQuickStartの手順は次の通り。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

では、ここにTypescriptを追加しよう。

# typescript導入
npm install --save-dev typescript

# main.js を main.ts に
mv main.js main.ts

# typescriptコンパイル用の設定ファイル作成
echo '{}' > tsconfig.json

そして以下の2ファイルを少し変更

main.ts

-const electron = require('electron')
-// Module to control application life.
-const app = electron.app
-// Module to create native browser window.
-const BrowserWindow = electron.BrowserWindow
+import { app, BrowserWindow } from 'electron'

 const path = require('path')
 const url = require('url')

package.json

   "description": "A minimal Electron application",
   "main": "main.js",
   "scripts": {
-    "start": "electron ."
+    "start": "tsc && electron ."
   },
   "repository": "https://github.com/electron/electron-quick-start",
   "keywords": [

準備完了

これでTypescriptでElectronが起動します！

npm start