Vue3 Propsの型推論

今までJavascriptばかりで、TypeScriptは使っていませんでしたが、実際にTypeScriptを使い始めると、もうTypeScript抜きでの開発は怖くてできなくなります。

TypeScriptの強力な機能の１つが「型」を持つことです。

Vue3はpropsを受け取る際に型を指定できます。このやり方について無知ゆえに変な書き方をしていましたが、どうやらもっと良い書き方があるようです。今日はそんな記事を書いてみました

Interfaceを使って型を指定する？ #

最初はよくわからなかったのでこのやり方を使っていました。

import { defineComponent, inject, ref, reactive } from '@vue/composition-api'
import { ReportInterface } from 'components/if/common'

interface Props {
  templateId: string
  propsReports: ReportInterface[] | undefined
}

export default defineComponent({
  props: {
    templateId: { required: true, type: String },
    propsReports: { required: false, default: undefined } // ◀これの型指定を interfaceで定義
  },
  setup (props: Props) { // ◀ Props型にすればpropsの型推論が効く
  }
})

これでも動きますが、似たような記述を２回書かなければならず、ちょっと面倒です。あとリンターがWarningを飛ばしてきます。

vue/require-prop-types: Prop "propsReports" should define at least its type.

これに対応するため、 propsReportsに対して type: Object と書いてもいいのですが、なんか違う・・・これじゃない感がありました。

type: Object as PropType <型>を使う #

よくよく調べてみると、propのTypeに自分が作った型を指定できるようです。それがこの PropType です。

import { defineComponent, inject, ref, reactive, PropType } from '@vue/composition-api'
import { ReportInterface } from 'components/if/common'

export default defineComponent({
  props: {
    templateId: { required: true, type: String },
    propsReports: { required: false, default: undefined, type: Object as PropType <ReportInterface[]> } // ◀ここに型をかける
  },
  setup (props) { // ◀ Propsは自動で型推論される
  }
})

このPropTypeを使えばInterfaceで別途型定義しなくても、propsの中に独自の型を書き込むことができるようです。ちゃんと型推論も機能します。

TypeScriptはなれるまで大変だけど便利 #

まだまだTypeScriptはわからないことがたくさんあります。今回Vue3のリリースからTypeScriptを正式に始めようと思いましたが、最初はワーニングの雨あられ。心が折れそうになりました。 しかし１週間も四苦八苦しているとだんだんやり方が分かってきます。Vue3ではTypeScriptと相性が良くなったので、ぜひ活用したいですね