Compilation error: Property 'htmlType' is missing in type

[akob]

• 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 & Pick<Readonly<{ children?: ReactNode; }> & Readonly & 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 & 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"; }'.

[zidantousoft]

我也遇到这个问题了，不过是其他组件，typescript描述文件有很多问题

[zidantousoft]

<List.Item column xxl xl lg md sm xs key={index} className={className} style={{ ...style, padding: "12px" }}>

List.Item里面居然有这么多个不相关的属性column xxl xl lg md sm xs
描述文件里面的propTypes跟实际的属性完全没有任何关系，官方的同学赶紧改改吧，还有其他组件也有类型问题，Input组件的autosize和接口中的定义不一
export default class Item extends React.Component<ListItemProps, any> {
static Meta: typeof Meta;
static propTypes: {
column: any;
xs: any;
sm: any;
md: any;
lg: any;
xl: any;
xxl: any;
};
static contextTypes: {
grid: any;
};
render(): JSX.Element;
}

[aaronchenwei]

This is related to following new changes introduced in TypeScript 3.0. - Support for defaultProps in JSX.

microsoft/TypeScript#23812

autosize (and also some other properties in many components) have default value. So the fix could be explict set autosize in defaultProps.

A workaround is to downgrade TypeScript to 2.x.

[DarrenMan]

this worked for me Property 'htmlType' is missing in type '{ shape: "circle"; icon: string; }'

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

[afc163]

PR is welcome~

[akob]

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

[sbusch]

I get a similar error:

Type '{ children: Element[]; getContainer: () => HTMLElement; destroyOnClose: true; title: string; width: string | number | undefined; style: { minWidth: string | number | undefined; maxWidth: string | number | undefined; }; ... 5 more ...; footer: Element[]; }' is not assignable to type 'Pick<MergePropTypes<Readonly<{ children?: ReactNode; }> & Readonly<ModalProps>, InferProps<{ prefixCls: any; onOk: any; onCancel: any; okText: any; cancelText: any; centered: any; width: any; confirmLoading: any; ... 4 more ...; closable: any; }>>, "mask" | ... 23 more ... | "align">'.
  Property 'align' is missing in type '{ children: Element[]; getContainer: () => HTMLElement; destroyOnClose: true; title: string; width: string | number | undefined; style: { minWidth: string | number | undefined; maxWidth: string | number | undefined; }; ... 5 more ...; footer: Element[]; }'.

See also https://stackoverflow.com/questions/51748528/property-xxx-is-missing-in-type-in-ant-design-with-typescript

Workaround:

1. downgrade Typescript to 2.9.2

2. Change RcFile definition in node_modules/antd/lib/upload/interface.d.ts, line 8 by removing the ? behind lastModifiedDate: Change

export interface RcFile extends File {
    uid: string;
    lastModifiedDate?: Date;
}

to

export interface RcFile extends File {
    uid: string;
    lastModifiedDate: Date;
}

Related issue: #11625

See also https://stackoverflow.com/questions/51737426/error-ts2430-interface-rcfile-incorrectly-extends-interface-file-in-antd

[bsunderhus]

I've encountered the same problem. And there's no way to override the class declarations to temporarily solve it because Ant exports all classes as default, which basically makes it impossible to augment.

Might I suggest stopping with default exporting in the project? It sucks for typescript augmentation, which would solve this problem for a brief

[vdfor]

Same problem

[cdeutsch]

For a workaround you can downgrade to these NPMs

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

See #11697

[IssueHuntBot]

@BoostIO funded this issue with $20. Visit this issue on Issuehunt

[yokyj]

I think that s a bug in antd3.8.0

[aaronchenwei]

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.

[yesmeck]

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

[sbusch]

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": "*", ).

[IssueHuntBot]

@afc163 has started working. Visit this issue on Issuehunt

[IssueHuntBot]

@BoostIO cancelled funding, $20, of this issue. Visit this issue on Issuehunt

[IssueHuntBot]

@afc163 has started working. Visit this issue on Issuehunt

[IssueHuntBot]

@afc163 has started working. Visit this issue on Issuehunt

[IssueHuntBot]

@afc163 has submitted output. Visit this issue on Issuehunt

[JakubKahovec]

The issue re-appears in antd 3.10.0 and typescript 3.1.1

[OzairP]

Still running into this issue :(

├─ @types/react-dom@16.0.7
├─ @types/react@16.4.18
├─ antd@3.10.4
├─ react-dom@16.4.2
├─ react@16.4.2
├─ typescript@3.1.6

[OzairP]

Seem's that in button.d.ts the propTypes is not declared as optional. While in React defs, ComponentClass (which is the static interface of React.Component [1]) has propTypes declared as optional. This signature mismatch is causing the issue. defaultProps should also be optional.

@yesmeck I believe this should be re-opened because the current code is incorrectly implementing the static interface.

// lib/button/button.d.ts
export default class Button extends React.Component<ButtonProps, any> {
    // ...
    static propTypes: {
        type: any;
        shape: any;
        size: any;
        htmlType: any;
        onClick: any;
        loading: any;
        className: any;
        icon: any;
    };
    // ...
}

// react/index.d.ts:357
interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
    new (props: P, context?: any): Component<P, S>;
    propTypes?: ValidationMap<P>; // here propTypes is optional
    contextTypes?: ValidationMap<any>;
    childContextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

[jannikbuschke]

Running into the same issue

[ztplz]

@jbuschke Could you reproduce this problem with a simple demo?

[onlyann]

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.

[sledorze]

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

[cdeutsch]

I'd recommend ditching yarn.

They've never been able to fix that duplicate problem and it's not worth fighting when npm just works now.

Took me a long time to ditch it but very happy with npm

[sledorze]

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 :)

[jpz02]

I have the Property 'xxx' is missing in type error well.I'm currently developing a component library that imports antd. I use npm link to test changes in an application. That application also has antd as a dependency. Strangely though, when I publish the component library and install it as a normal dependency, I don't get the issue.

I'm running:
"react": "^16.8.3",
"@types/react": "^16.8.5",
"antd": "^3.13.6",
"typescript": "^3.3.3333",

The setup makes it hard to replicate, but can provide more info if needed. Thanks.

[symbyte]

I was experiencing this issue, but after upgrading to v3.16.5 I am no longer seeing it.