Vue TSX - 如何告诉 Typescript 在可重用组件中允许使用 HTML 属性？

Posted 2023-02-21

【中文标题】Vue TSX - 如何告诉 Typescript 在可重用组件中允许使用 HTML 属性？

【英文标题】：Vue TSX - How to tell Typescript that the HTML attributes are allowed in reusable components?

【发布时间】：2021-06-15 11:19:40

【问题描述】：

假设我有这个输入组件：

import  defineComponent  from "@vue/runtime-core"

export default defineComponent(
    inheritAttrs: false,
    setup(props,  attrs ) 
        return () => (
            <div>
                <input type="text" ...attrs />
            </div>
        )
    
)

现在，我像这样使用这个组件并提供type="password" 属性：

import  defineComponent  from "@vue/runtime-core"
import Input from "./components/input"

export default defineComponent(
    setup(props,  attrs ) 
        return () => <Input type="password"></Input>
    
)

但是 Typescript 抱怨：

Property 'type' does not exist on type 'IntrinsicAttribute'> & VNodeProps & AllowedComponentProps & ComponentCustomProps>'

【参考方案1】：

所以我不是 Vue.JS 专家（请告诉我它是否不起作用以及为什么），但经过一些研究我发现你必须通过添加 props 对象来键入 props defineComponent。这将告诉 TypeScript 你可以传递特定的道具。

import  defineComponent  from "@vue/runtime-core"

export default defineComponent(
    inheritAttrs: false,
    props: 
        type: String // this is the typing (warning: you cannot use typescript types here)
    
    setup(props,  attrs ) 
        return () => (
            <div>
                <input type=props.type ?? "text" ...attrs />
            </div>
        )
    
)

您可能会问?? 运算符是做什么的。我喜欢称它为“默认运算符”，因为它默认了它之前的值和它之后的值。在这种情况下，这意味着如果props.type 是undefined 或null，它将用"text" 替换它。