如何在反应中获取输入字段类型作为道具 typescript

Question

how I get input field type as the props in react typescript I tried to send type as the string but it gives this error

**

No overload matches this call. Overload 1 of 2, '(props: InputProps | Readonly): Input', gave the following error. Type 'string' is not assignable to type '"number" | "button" | "select" | "textarea" | "time" | "image" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "checkbox" | "reset" | "submit" | "date" | "datetime-local" |... 8 more... | undefined'. Overload 2 of 2, '(props: InputProps, context: any): Input', gave the following error. Type 'string' is not assignable to type '"number" | "button" | "select" | "textarea" | "time" | "image" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "checkbox" | "reset" | "submit" | "date" | "datetime-local" |... 8 more... | undefined'. TS2769

**

here is my code

import React from 'react';
import { Input } from 'reactstrap';


interface IconInputProps {
    name: string,
    label: string,
    placeholder: string,
    required: boolean,
    errorMessage: string,
    autoFocus: boolean,
    type: string
    icon: string

}

class IconInput extends React.Component<IconInputProps> {

    render() {
        return (
            <div>
                <Input
                    name={this.props.name}
                    lable={this.props.label}
                    type={this.props.type}
                    placeholder={this.props.placeholder}
                />
            </div>
        );
    }
}

export default IconInput;

Answer 1

You could explicitly declare the type as:

import React, { ComponentProps } from 'react';
import { Input } from 'reactstrap';

interface IconInputProps {
    type: ComponentProps<typeof Input>['type'];
    // ...
}

This passes through the type declaration of a specific component prop and works even if that type is not exported by the given lib/component.

---

Though there are a few caveats:

does not work with statically declared default props and generic props

Source: https://github.com/piotrwitek/react-redux-typescript-guide#reactcomponentpropstypeof-xxx

Answer 2

type: string should be replace by type: InputType

And don't forget to import this import { InputType } from "reactstrap/lib/Input.d";

Answer 3

You can try to extend the InputProps which you should import from @types/reactstrap ( i guess it has types )

In your interface just add the props that are not in InputProps . So you can remove type, name and so on. So your code will look something like

interface IIconInputProps extends InputProps {
    label: string,
    errorMessage: string,
    icon: string
}

Also I would suggest to start the interface names with I so you know it's an interface.