typescript - 使用组合 api 和 typescript 类型系统强类型化 vue 组件的 props

Question

我正在使用带有打字稿的 vue composition api。

如何使用打字稿打字系统强输入组件道具？

Answer 1

Troy Kessier 的回答并不完全准确。我引用以下文档definecomponent：

或者，如果您的组件不使用除设置本身之外的任何选项，您可以直接传递该函数 [...]

所以没有两种声明属性的方式，而是两种声明组件的方式，并且每种方式都提供了自己的 props 类型。

使用经典方式和 TypeScript，使用PropType：

import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    someOptionalString: String,

    someRequiredString: {
      type: String,
      required: true
    },

    someObject: {
      type: Object as PropType<MyObjectType>,
      required: true
    },
  },

  // …
})

注意：PropType有助于为函数props中的参数提供正确的 TypeScript 类型setup。但是 props 的底层 Vue 类型仍然Object存在，目前没有办法为父组件传递的这些 props 强制执行更好的类型。

Answer 2

如官方文档中所述，您可以通过两种方式键入道具：

通过参数注释定义 arops

import { defineComponent } from 'vue'

export default defineComponent((props: { foo: string }) => {
  props.foo
})

或者像这样

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})