vue.js - Vue TSX - Hvordan fortelle Typescript at HTML-attributter er tillatt i gjenbrukbare komponenter?

Anta at jeg har denne inndatakomponenten:

import { defineComponent } from "@vue/runtime-core"

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

Nå bruker jeg denne komponenten slik og gir type="password"-attributt:

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

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

Men Typescript klager:

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

Svar #1

Så jeg er ikke en Vue.JS-ekspert (vennligst si ifra hvis det ikke fungerer og hvorfor), men etter litt research fant jeg ut at du må skrive props ved å legge til et props-objekt til defineComponent. Det vil fortelle TypeScript at du kan sende spesifikke props.

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

Du kan spørre hva ??-operatøren gjør. Jeg liker å kalle den for «standardiseringsoperatøren» fordi den standardiserer verdien før den med verdien etter. I dette tilfellet betyr det at hvis props.type er undefined eller null, vil den erstatte den med "text".

Relaterte artikler