[QUESTION] How to allow HTML attributes as props while using Typescript JSX? #3452
Description
Version
3.0.7
Reproduction link
https://github.com/sanjade/vue3-bug
Steps to reproduce
First of all, I know this kind of issue shouldn't be asked here but I just wanted to tell you that I did try asking the question in StackOverflow. However it has no response and it's been 2 days.
- git clone https://github.com/sanjade/vue3-bug - cd vue3-bug && yarn - Goto `App.tsx` and you will see the error in `type` attribute What is expected?
Suppose I have this input component:
// components/input.tsx import { defineComponent } from "@vue/runtime-core" export default defineComponent({ inheritAttrs: false, setup(props, { attrs }) { return () => ( <div> <input type="text" {...attrs} /> </div> ) } }) Now, I use this component like so and provide type="password" attribute:
// App.tsx import { defineComponent } from "@vue/runtime-core" import Input from "./components/input" export default defineComponent({ setup(props, { attrs }) { return () => <Input type="password"></Input> } }) I expect Typescript not to throw any error.
What is actually happening?
But Typescript complains in App.tsx:
(JSX attribute) type: string Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{} & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'. Property 'type' does not exist on type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{} & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.ts(2322) How do you specify that InputHTMLAttributes are also allowed as props in the input.tsx component?