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

html5 • • 问答 • 315 阅读

假设我有这个输入组件：

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>
    }
})

但是打字稿抱怨：

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

回答

所以我不是 Vue.JS 专家（请告诉我它是否不起作用以及为什么），但经过一些研究我发现你必须props通过向.js添加一个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>
        )
    }
})

您可能会问??接线员是做什么的。我喜欢称它为“默认操作符”，因为它默认了它之前的值和它之后的值。在这种情况下，这意味着 if props.typeisundefined或null它将替换为"text".

以上是VueTSX-如何告诉Typescript在可重用组件中允许使用HTML属性？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>