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

Question

我正在使用 vue 组合 api 和打字稿。

如何使用打字稿打字系统强打组件属性？

Answer 1

如官方所述docs您可以通过两种方式输入道具：

通过参数注释定义 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
  }
})

Answer 2

Troy Kessier 的回答并不完全准确。我引用 the documentation on definecomponent:

Alternatively if your component does not use any option other than setup itself, you can pass the function directly […]

所以没有两种声明属性的方式，而是两种声明组件的方式，并且每种方式都提供了自己的输入 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 有助于为 setup 函数中的 props 参数提供正确的 TypeScript 类型。但是 props 的底层 Vue 类型仍然是 Object，目前没有办法为父组件传递的这些 props 强制执行更好的类型。

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

Strongly typing props of vue components using composition api and typescript typing system

strong-typing

typescript

vue.js

vue-composition-api