Vue TSX - How to tell Typescript that the HTML attributes are allowed in reusable components?
So I am not a Vue.JS expert (please tell me if it doesn't work and why), but after some research I found out that you have to type the props by adding a props object to defineComponent. That will tell TypeScript that you can pass specific 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> ) }})You might ask what the ?? operator does. I like to call it the "defaulting operator" because it default the value before it with the value after it. In this case it means that if props.type is undefined or null it will replace it with "text".