vue.js - Vue TSX - ¿Cómo decirle a Typescript que los atributos HTML están permitidos en componentes reutilizables?

Supongamos que tengo este componente de entrada:

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

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

Ahora, uso este componente de la siguiente manera y proporciono el atributo type="password":

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

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

Pero Typescript se queja:

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

Respuesta #1

Así que no soy un experto en Vue.JS (por favor dime si no funciona y por qué), pero después de investigar un poco descubrí que tienes que escribir los props añadiendo un objeto props a defineComponent. Eso le dirá a TypeScript que puedes pasar props específicos.

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

Podrías preguntar qué hace el operador ??. Me gusta llamarlo el "operador de valor predeterminado" porque asigna por defecto el valor que está antes de él con el valor que está después. En este caso, significa que si props.type es undefined o null, lo reemplazará con "text".