vue3コンポーネントのTS型宣言サンプルコード

小道具のタイプに注釈を付ける

 使用するとき

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined
</script>

これは、defineProps() に渡される引数が実行時 props オプションとして使用されるため、実行時宣言と呼ばれます。

2 番目の方法は、ジェネリック パラメーターを使用して props のタイプを定義する方法で、より直接的です。

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

これは型ベースの宣言と呼ばれ、コンパイラは可能な限り型パラメータに基づいて同等の実行時オプションを導出しようとします。

props タイプを別のインターフェイスに移動することもできます。

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()
</script>

タイプベースのアプローチはより簡潔ですが、props のデフォルト値を定義する機能が失われます。現在実験中のリアクティブ構文シュガーを使用してこれを解決できます。

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}
// 响应性语法糖 默认值会被编译为等价的运行时选项
const { foo, bar = 100 } = defineProps()

この動作は現在、構成で明示的に有効にする必要があります。

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}
// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          reactivityTransform: true
        }
      })
  }
}

使用しない場合

import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    props.message // <-- 类型：string
  }
})