ant-design: Compilation error: Property 'htmlType' is missing in type

I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.8.0

Environment

Windows 7

Steps to reproduce

After migration to typescript 3.0.1 and antd 3.8.0 I cannot compile project

<Button id="goToTopButton" className="scroll-to-top-button" shape="circle"> <i className="material-icons">arrow_upward</i> </Button>

What is expected?

Compilation sucseed

What is actually happening?

I have compilation error:

TS2322: Type ‘{ children: Element; id: string; className: string; shape: “circle”; }’ is not assignable to type ‘(IntrinsicAttributes & IntrinsicClassAttributes<Button> & Pick<Readonly<{ children?: ReactNode; }> & Readonly<AnchorButtonProps> & Pick<InferProps<{ type: any; shape: any; size: any; htmlType: any; … 4 more …; block: any; }>, “htmlType”>, “color” | … 258 more … | “htmlType”> & Partial<…> & Partial<…>) | …’. Type ‘{ children: Element; id: string; className: string; shape: “circle”; }’ is not assignable to type ‘Pick<Readonly<{ children?: ReactNode; }> & Readonly<NativeButtonProps> & Pick<InferProps<{ type: any; shape: any; size: any; htmlType: any; onClick: any; loading: any; className: any; icon: any; block: any; }>, “htmlType”>, “color” | … 262 more … | “value”>’. Property ‘htmlType’ is missing in type ‘{ children: Element; id: string; className: string; shape: “circle”; }’.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 31 (8 by maintainers)

Most upvoted comments

I can confirm this is fixed, using:

Package	Version
`typescript`	`3.0.1`
`antd`	`3.8.1`
`@types/prop-types`	`15.5.5`

I had to explicitly upgrade @types/prop-types because @types/react requires @types/prop-types without specifying the version ("dependencies": { "@types/prop-types": "*", ).

sbusch on Aug 13, 2018

For a workaround you can downgrade to these NPMs

@types/react@16.4.7 @types/react-dom@16.0.6

See #11697

cdeutsch on Aug 9, 2018

Just upgrade to antd 3.8.1 and found the types issues for Input, List.Item and etc have been disappeared.

Meanwhile checked with the generated d.ts. Let’s take button.d.ts for example. propTypes is correctly generated with PropTypes. It was any in antd 3.8.0.

    static propTypes: {
        type: PropTypes.Requireable<string>;
        shape: PropTypes.Requireable<string>;
        size: PropTypes.Requireable<string>;
        htmlType: PropTypes.Requireable<string>;
        onClick: PropTypes.Requireable<(...args: any[]) => any>;
        loading: PropTypes.Requireable<boolean | object>;
        className: PropTypes.Requireable<string>;
        icon: PropTypes.Requireable<string>;
        block: PropTypes.Requireable<boolean>;
    };

it seems that the combination of latest typescript (3.0.1) and @types/react (16.4.9), @types/react-dom(16.0.7) and @types/prop-types(15.5.5) fixed the types inference issue.

aaronchenwei on Aug 13, 2018

Just to clarify; it’s subjectively a problem (depends on the context and needs).

It can be a desirable behaviour if one wants to keep stable dependencies. The trade-off is that it can result into several versions of the same lib.

On the other hand, having only one version of a Lib may be desirable but has the tradeoff of maybe forcing a lib dependency to an incompatible version. The tradeoff here can then be that some runtime issues may happened.

Everything is a trade-off 😃

sledorze on Feb 21, 2019

@onlyann or use https://github.com/atlassian/yarn-deduplicate maybe?

sledorze on Feb 21, 2019

I often run into this issue when I upgrade my package dependencies through yarn and that there is a new version of @types/prop-types. It ends up having 2 entries for @types/prop-types, one with the latest, and one with the current.

The only work around I find is to delete the yarn.lock file and re-run yarn install.

onlyann on Feb 21, 2019

This issue should have been fixed in 3.8.1 with latest version of @types/react.

yesmeck on Aug 13, 2018

migration to typescript 2.x also does not help have next error: node_modules/antd/lib/upload/interface.d.ts(6,18): TS2430: Interface 'RcFile' incorrectly extends interface 'File'. Types of property 'lastModifiedDate' are incompatible. Type 'Date | undefined' is not assignable to type 'Date'. Type 'undefined' is not assignable to type 'Date'. tried 2.8.1 and 2.9.2

akob on Aug 9, 2018

this worked for me Property ‘htmlType’ is missing in type ‘{ shape: “circle”; icon: string; }’

add declare module 'antd' in images.d.ts

DarrenMan on Aug 9, 2018