「Cannot extend an interface 'NodeJS.EventEmitter'.…」の解決方法メモ(vue-cli4+TypeScript+Electron)

2322 ワード
Electron vue-cli TypeScript Node.js Node.js テキストリンク

はじめに

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/[email protected]

そして、もう一度ビルドを試す。

$ npm run electron:build
~~~省略~~~
DONE  Build complete!

できた！ビルドしたアプリもちゃんと開ける。

備考

現時点でpackage-lock.jsonを見てみると、Electronの@types/nodeの要求バージョンは12.0.12となっているので、そちらのバージョンを入れたほうが安心かもしれない。