typescript - vue3中props的定义方式是什么(Typescript)

Question

在 Vue3 的 defineComponent 函数中，第一个泛型参数是 Props，所以我在这里使用 Typescript 接口(interface)提供我的 props 类型。喜欢:

export default defineComponent<{ initial?: number }>({
  setup(props) {
    const count = ref(props.initial ?? 0);
    const increase = () => count.value++;
    const decrease = () => count.value--;
    return { count, increase, decrease };
  }
});

但是我的 props 没有被 Vue 识别，这意味着下面的代码将无法工作:

<Counter :initial="5"></Counter>

如果我在我的组件中定义 props 选项，例如:

export default defineComponent<{ initial?: number }>({
  props: {
    initial: { type: Number, required: false },
  },
  setup(props) {
    const count = ref(props.initial ?? 0);
    const increase = () => count.value++;
    const decrease = () => count.value--;
    return { count, increase, decrease };
  }
});

会发生类型错误 TS2769: No overload matches this call.而且我知道如果我删除通用参数将清除此错误，但 Prop 选项不是原生 Typescript。

有人知道我该如何解决这个问题吗？

Answer 1

Props 是一个 Vue 运行时构造，不能从 TypeScript 类型定义中推断出来(默认值、验证器等与 props 相关联)。您必须按照 API 的预期使用 props 选项来定义它们。要为您的 Prop 提供强类型定义，请使用 PropType 到 annotate your props .