Electronをいじってみる3

Electronをいじってみる2で残っていた問題（期待通りのメニューバーが出ない）が解決したので投稿

解決方法としては、予想通り自分でメニューバー設定をすることだった。
長いけど全部載せておく。前回と変わったところとしては、template変数の定義とそれを使ってメニューバー設定をするところ。

main.ts

///<reference path="./typings/index.d.ts"/>

// In the main process.
const { app, BrowserWindow, Menu } = require('electron')

const template: Electron.MenuItemOptions[] = [
    {
        label: 'Edit',
        submenu: [
            { role: 'undo' },
            { role: 'redo' },
            { type: 'separator' },
            { role: 'cut' },
            { role: 'copy' },
            { role: 'paste' },
            { role: 'pasteandmatchstyle' },
            { role: 'delete' },
            { role: 'selectall' }
        ]
    },
    {
        label: 'View',
        submenu: [
            { role: 'reload' },
            //      {role: 'forcereload'},
            { role: 'toggledevtools' },
            { type: 'separator' },
            { role: 'resetzoom' },
            { role: 'zoomin' },
            { role: 'zoomout' },
            { type: 'separator' },
            { role: 'togglefullscreen' }
        ]
    },
    {
        role: 'window',
        submenu: [
            { role: 'minimize' },
            { role: 'close' }
        ]
    },
    {
        role: 'help',
        submenu: [
            {
                label: 'Learn More',
                click() { require('electron').shell.openExternal('https://electron.atom.io') }
            }
        ]
    }
]

app.on('window-all-closed', () => {
    app.quit()
})

app.on('ready', () => {
    let win = new BrowserWindow({ width: 800, height: 600 })
    // load a local HTML file
    win.loadURL(`file://${__dirname}/index.html`)
    console.log(app.getAppPath())
    const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
})

つまったところとしては2つあって

1. 見つけてきたメニューバー設定のサンプルをそのまま設定したら型エラーでコンパイルに失敗した

見つけたサンプルがJavaScriptのものなのでクラスがついておらずエラーになってしまった。
electron/index.d.tsを見に行ってMenu.buildFromTemplateの引数の型をtemplate変数に設定した。
といっても定義に対して型名をどう書くのかわからなかったので、以下のサイトを参考にした

TypeScript の型定義ファイルと仲良くなろう
http://developer.hatenastaff.com/entry/2016/06/27/140931

2. 見つけてきたメニューバー設定のサンプルが型定義と合っていなかった

// {role: 'forcereload'},のコメントを外すとコンパイルに失敗する。

型エラーが出たから再度electron/index.d.tsを見に行ったら
'forcereload'はMenuItemRole型のパターンの中になかったという。

とりあえず基本的なことはそろったと思うので、いったんソースをまとめておこうと思うけど後日に。