前提
- Nuxt.js / 2.15.2
- TypeScript / 4.2.3
> npm list vue nuxt-sample-app@1.0.0 /Users/fuqda/nuxt-sample-app ├─┬ @nuxtjs/composition-api@0.22.3 │ ├─┬ @nuxt/vue-app@2.15.2 │ │ ├── vue@2.6.12 deduped │ │ └─┬ vuex@3.6.2 │ │ └── vue@2.6.12 deduped │ ├─┬ @vue/composition-api@1.0.0-rc.5 │ │ └── vue@2.6.12 deduped │ └── vue@2.6.12 ├─┬ @vue/test-utils@1.1.3 │ └── vue@2.6.12 deduped ├─┬ nuxt@2.15.2 │ └─┬ @nuxt/vue-renderer@2.15.2 │ └── vue@2.6.12 deduped └─┬ vue-jest@3.0.7 └── vue@2.6.12 deduped
> npm ls typescript nuxt-sample-app@1.0.0 /Users/fuqda/nuxt-sample-app ├─┬ @nuxt/typescript-build@2.0.6 │ ├─┬ ts-loader@8.0.17 │ │ └── typescript@4.2.3 deduped │ └── typescript@4.1.5 ├─┬ @nuxt/typescript-runtime@2.0.2 │ ├─┬ ts-node@9.1.1 │ │ └── typescript@4.2.3 deduped │ └── typescript@4.1.5 ├─┬ @nuxtjs/eslint-config-typescript@6.0.0 │ └─┬ @typescript-eslint/eslint-plugin@4.19.0 │ └─┬ tsutils@3.21.0 │ └── typescript@4.2.3 deduped ├─┬ ts-jest@26.5.2 │ └── typescript@4.2.3 deduped └── typescript@4.2.3
やりたいこと
たとえば、Blog情報が入っているBlogオブジェクト型のようなものをPropsの型に指定したい。
サンプルコード
事前に typesというディレクトリ配下に型情報だけ定義した blog.ts というファイルを用意しておき、それを importして Blog 型として利用します。
そして、 PropType も @nuxtjs/composition-api から importして Object as PropType<Blog> の形でpropsで渡ってきたオブジェクトに型を付与しています。
<script lang="ts"> import { defineComponent, PropType } from '@nuxtjs/composition-api' import { Blog } from '@/types/blog' export default defineComponent({ name: 'BlogTableRecord', props: { blog: { type: Object as PropType<Blog>, default: null } } }) </script>
