Electron + Vue 3 + TypeScript + Element Plusで出たVSCodeの謎のエラーを解消する方法

作りたいアプリが思いついたのでvscodeで久々にElectronの環境を構築してみました。
いまはもうElectronはバージョン22で、Vue.js 3.0で、Vue CLIを使った構築も非推奨になってるんですね。。
とはいえ慣れた環境がしっくりくるのでVue CLIで構築しました。
memoを残しといてよかった。

以下の方法で2023年現在でも構築できました。

final.hateblo.jp

ただし、Node.jsは現時点の推奨版の18.xだとElectron Builderは以下のv3 alpha版を使わないと動かなかったです。

github.com

UIフレームワークはVue3に対応したシンプルなElement Plusを使用することにしました。

element-plus.org

ちなみにVue CLIのプラグインにElement Plusのやつがありましたが、メンテされておらず動かなかったので、普通に公式の手順通りnpmでいれました。

で、環境構築できたものの、謎のエラーに苛まれました。
以下のようにelタグのところでエラーになるんです。

Argument of type '{ [x: string]: any; }' is not assignable to parameter of type 'App<any> & Partial<{ readonly type: EpPropMergeType<StringConstructor, "" | "default" | "text" | "success" | "warning" | "info" | "primary" | "danger", unknown>; ... 12 more ...; readonly autofocus: boolean; }> & Omit<...>'.
  Type '{ [x: string]: any; }' is missing the following properties from type 'App<any>': version, config, use, mixin, and 11 more.

これはtypescriptのエラーで実際動かす分には問題ないですが、コード書いているときに気になって集中できません。

で、いろいろ調べたのですが、なかなかわからなくてChatGPTにも聞きましたが、ググれと言われました。

最終的に調べまくってtsconfig.jsonが原因とわかりました。
以下のところの"element-plus/global"を削除すると解決しました！

{
  "compilerOptions": {
    "types": ["webpack-env", "element-plus/global"],

"element-plus/global"のTypeScriptの定義ファイルはあったのでなにが問題かいまだによくわかってないですが、解決してスッキリです。