Nuxt.js 2.x + TypeScript 4.x その0010 FontAwesome5のアイコンをpropsから渡すときの型を設定する

はじめに

以前書いた「Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う - Motomichi Works Blog」みたいな感じでimportしたアイコンを、例えば自分で作ったMyComponentに渡すときにMyComponentのpropsの型はどのように設定するかという話です。

上記の記事でcomputedにfaSearchを定義していますが、これは既にIconDefinition型が設定されています。

MyComponentに渡したアイコンもIconDefinition型として扱いたいというわけです。

今日の開発環境

• Nuxt 2.14.12
• TypeScript 4.2.3

IconDefinition型が定義されているファイルを探す

node_modulesディレクトリ内を探してみると、node_modules/@fortawesome/fontawesome-common-types/index.d.ts の中に定義されていました。

MyComponentのpropsに型を設定する

以下のような感じでimportします。

import Vue, { PropType } from 'vue'
import { IconDefinition } from '@fortawesome/fontawesome-common-types/index'

以下のような感じで型を設定しました。

props: {
    icon: {
      type: Object as PropType<IconDefinition>,
      required: false,
      default: () => null,
    },
},

this.iconが以下のように型推論されるようになりました。