如何在 Vue3 中启用仅使用 TypeScript 的道具键入

Posted 2023-02-23

【中文标题】如何在 Vue3 中启用仅使用 TypeScript 的道具键入

【英文标题】：How to enable TypeScript-only Props Typing in Vue3

【发布时间】：2020-09-10 20:16:57

【问题描述】：

根据旧函数 rfc，Vue3 将仅支持 typescript props -typing:https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#typescript-only-props-typing

当我尝试遵循代码时，它似乎不起作用。道具将是未定义的。

interface MessageProps 
  msg: string;
  list: any[];

export default defineComponent(
  name: 'HelloWorld',
  setup(props: MessageProps) 
    console.log(props)
  
)

【参考方案1】：

截至vue@3.0.0-beta.14，props 声明仍然是必需的，尽管 RFC 表明它是可选的。我没有看到有关该特定功能的任何讨论，因此我认为它尚未实现。

与此同时，声明如下所示的props 将解决您的问题：

export default defineComponent(
  // declaration still required as of vue@3.0.0-beta.14
  props: 
    msg: String,
    list: Array,
  ,
  setup(props: MessageProps)  /*...*/ 
)

【讨论】：

感谢回复，我在Vue不和谐频道问过这个问题，核心成员告诉我他们已经为此问题开了一些票。