Question related to typings for additional otherProps using interface merging

English speaker, translated the template to english.

The environment in which the problem occurs is:

• antd Version: 2.5.2
• TypeScript version: 2.1.4
• Operating system and version: Windows 10
• Browser and its version: Not related to browser

What did you do? Please provide as detailed a step as possible.

I’m trying to add additional props to an , such as required and form, in a TypeScript environment, for example:

import { Input } from "antd";

<antd.Input form={formClass} value={value} required={true} onChange={e => this.handleChange(e)} />

The results you expect are:

I expected to be able to extend the InputProps interface to include the additional props so the TypeScript could compile without errors.

The actual result is:

The following errors are thrown while compiling:

Property 'form' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Input> & { children?: ReactNode; } & InputProps'.at line 50 col 29
Property 'required' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Input> & { children?: ReactNode; } & InputProps'.at line 52 col 29

This seems logical to me as the InputProps (https://github.com/ant-design/ant-design/blob/master/components/input/Input.tsx#L35) does not provide the required and form props, yet it allows for additional props to be passed: https://github.com/ant-design/ant-design/blob/master/components/input/Input.tsx#L224.

A reproducible online demo

Coulnd’t provide a reproducible online demo as codepen does not seem to typecheck the typescript.

Tl;dr

Is there a way to extend the InputProps from the antd library so I can add additional props? Or is there a better way to achieve this (without interface merging perhaps)?

[BANG88]

And if you want extend the Input component,its not difficult:

import { Input } from "antd";

// input has no default export it's Props,
// if you want give it a try,you can import it directly.
import { InputProps } from "antd/lib/input/input";

// Your Input Props
export interface MyInputProps extends InputProps {
    required?: boolean;
    form?: any;
}
// Extends antd's Input
class MyInput extends React.Component<MyInputProps, any>{
    render() {
        return <Input {...this.props} />
    }
}
// Usage
<MyInput size="large" form="your form data can be any type" required={true} />

If you have any questions, please reopen this issue.

[serhii-levchenko]

@Silox thanks for your quick reply. I will do the same.