typescript - 使用组合 API 和 typescript 打字系统对 vue 组件进行强打字

Question

我正在使用带有 typescript 的 vue 组合 api。

如何使用 typescript 打字系统对组件 Prop 进行强类型输入？

Answer 1

正如官方 docs 中解释的那样您可以通过两种方式输入 props:

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