はじめに
vue-cli 4とElectronでデスクトップアプリケーションを開発しようとした際に、@types/nodeのEventEmitterに関するエラーが発生した。無事解決できたのでメモとしてまとめる。
環境・バージョン
Vue：2.6.11
Vue CLI：4.4.6
@types/node：(14.0.14)→12.6.9(本記事の解決策)
Electron：9.0.0
発生した事象
"vue-cli3 + TypeScript + Electronでアプリを開発する"を参考に(ほぼコマンドや設定そのままで設定)プロジェクトを作成すると、最後のアプリケーションビルドの段階で以下のようなエラーが発生した。
$ npm run electron:build
~~~省略~~~
ERROR Failed to compile with 19 errors
~~~省略~~~
ERROR in C:(作業ディレクトリ)/node_modules/electron/electron.d.ts(1659,31):
1659:31 Cannot extend an interface 'NodeJS.EventEmitter'. Did you mean 'implements'?
1657 | }
1658 |
> 1659 | class BrowserWindow extends NodeJS.EventEmitter {
| ^
1660 |
1661 | // Docs: http://electronjs.org/docs/api/browser-window
1662 |
~~~省略~~~
どうやらinterfaceは継承できないと怒られているらしい。
調査・解決
ググってみると同じ内容のエラーに関するissueがGithubに立てられていた。
electron.d.ts does not work with @types/node v13.1.0 · Issue #21612 · electron/electron · GitHub
どうやら@types/nodeの12系→13系のバージョンアップの際に、EventEmitterがclassからinterfaceに変更されたことが原因らしい。
ということで、12系の@types/nodeをインストールする。
$ npm install -S @types/node@12.6.9
そして、もう一度ビルドを試す。
$ npm run electron:build
~~~省略~~~
DONE Build complete!
できた！ビルドしたアプリもちゃんと開ける。
備考
現時点でpackage-lock.jsonを見てみると、Electronの@types/nodeの要求バージョンは12.0.12となっているので、そちらのバージョンを入れたほうが安心かもしれない。