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]);
}
すると６行目の「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難しいですね。
コメント