Nuxt.js 2.10 + TypeScript propsに独自定義した型を指定する

今回は「公式ドキュメントをちゃんと読みましょう」というお話。

NuxtをTypeScriptで作っていて独自定義した型をpropsの型として使いたくてちょっとだけハマったのでメモします。

MyType.ts

type MyType = {
  hoge: string,
  huga: string
}

export default MyType;

こういう独自定義の型をpropsに指定したい場合

MyComponent.vue

<script lang="ts">
import Vue from 'vue';
import MyType from '~/path/to/MyType';

export default Vue.extend({
  ...
  props: {
    myProp: MyType,
  }
  ...
})
</script>

みたいに何も考えずに指定すると実行時エラーになります。
TS2693: 'MyType' only refers to a type, but is being used as a value here

ちょっとハマりましたが、他でもないNuxt TypeScript公式ドキュメントに書いてありました。

それを参考に先ほどのvueファイルを修正すると

MyComponent.vue

<script lang="ts">
import Vue, { PropOptions } from 'vue';
import MyType from '~/path/to/MyType';

export default Vue.extend({
  ...
  props: {
    myProp: {type: Object} as PropOptions<MyType>,
  }
  ...
})
</script>

こうなります。PropOptionsのimportをお忘れなく。