Electron の TypeScript で Hello world - しっぽを追いかけて

※ これは 2019/11/29 時点の node.js v13.2.0 Electron v7.1.2 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

前回は普通に Electron で Hello world してみましたが、今回はかんたんにできるらしい TypeScript への書き換えで Hello world してみます

前回と同じようにまずは VS Code で適当なフォルダを開き、ターミナルで下記コマンドを実行

mkdir tshello
cd tshello
npm init

前回と同じく Enter 連打ですべてデフォルト設定

package.json が生成されるので、下記のように少し書き換え

{
  "name": "tshello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "npm run build && electron ./index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^7.1.4",
    "typescript": "^3.7.3"
  }
}

scripts に build と start の行を追加しました

次に下記コマンドをターミナルでたたいて Electron と TypeScript の必要環境をインストール

npm install electron
npm install -g typescript

※ TypeScript 開発環境のインストールは PC 全体で共有するので、初回だけで OK

インストールが終わったら、下記コマンドをターミナルでたたいて TypeScript プロジェクト設定初期化

tsc --init

初期化が成功すると tsconfig.json が生成されました

次に index.html を下記のように記述

<!DOCTYPE html>
<html>
    <body>
        <h1>Hello electron!</h1>
    </body>
</html>

前回と全く一緒！

さらに index.ts も作ります

// electron の必要ライブラリをインポート
import {app, BrowserWindow} from 'electron'

// 一時変数用意
let mainWindow: Electron.BrowserWindow | null = null

app.on('ready', () => {
    
    // メインウィンドウを生成
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
        },
        width: 800,
        height: 600,
    })

    // ウィンドウが閉じたら後片付けする
    mainWindow.on('closed', () => {
        mainWindow = null
    })
    
    // index.hrml をウィンドウに表示
    mainWindow.loadURL('file://' + __dirname + '/index.html')
})