使用组合 API 和 TypeScript 类型系统强类型化 vue 组件的 props

我正在使用 vue 组合 api 和 typescript。

如何使用打字稿输入系统强类型化组件属性？

特洛伊·凯西尔的回答并不完全准确。我引用的文档definecomponent https://vue-composition-api-rfc.netlify.com/api.html#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
    },
  },

  // …
})

Notice: PropType有助于为props中的参数setup功能。但 props 的底层 Vue 类型仍然存在Object目前还没有办法对父组件传递的这些 props 强制执行更好的类型。