スポンサーリンク

TypeScript モジュールを複数インポートしてブラケット表記でアクセスするのにハマる

スポンサーリンク

Element-PlusでIconを使用しようとしてかなりハマりました。TypeScriptに詳しい方なら当然ってことかもしれませんが、私のような初心者の方向けに共有しようと思います。
公式サイトのInstallation欄に

If you want to use directly like the example, you need to globally register the components before using it.

https://element-plus.org/en-US/component/icon.html

と記載されているので、コンポーネントを登録するためにmain.tsに以下のコードを追加しました。

・・・
import * as Icons from '@element-plus/icons-vue'; // すべてのiconコンポーネントをIconsとしてインポート
・・・
// すべてのiconコンポーネントを登録
for (let key in Icons) {
   app.component(key, Icons[key]);
}

すると6行目の「Icons[key]」でエラーが出ました。

型 'string' の式を使用して型 'typeof import("/macork/node_modules/@element-plus/icons-vue/dist/types/index")' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。
  型 'string' のパラメーターを持つインデックス シグネチャが型 'typeof import("/marock/node_modules/@element-plus/icons-vue/dist/types/index")' に見つかりませんでした。ts(7053)

ブラケット表記で文字列を渡しているので、存在しないキー名が指定される可能性があるのでTypeScriptがエラーを出していると思っています。

解決方法

だいぶググって以下のように記述することでエラーが解消されました。

・・・
import * as Icons from '@element-plus/icons-vue'; // すべてのiconコンポーネントをIconsとしてインポート
・・・
// すべてのiconコンポーネントを登録
for (let key in Icons) {
   app.component(key, Icons[key as keyof typeof Icons]);
}

やってることは、「as keyof typeof Icons」でstringのkey変数をIcons型のプロパティに型変換していると思っています。TypeScript難しいですね。

コメント