antd 在 React 应用程序中但无法编译

antd in react app but failed to compile

antd教程在typescript中的使用

  1. 创建 React 应用程序...确定
  2. yarn 添加 antd ...ok
  3. 在 App.css 中导入 antd.css ...确定

但我遇到了这条错误消息

D:/8VSCode/vcjoo-ant/src/App.tsx
(16,10): Type '{ shape: "circle"; icon: string; }' 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 '{ shape: "circle"; icon: string; }' 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 '{ shape: "circle"; icon: string; }'.

我可以在antd中使用到{InputNumber}个组件 但是,我不能 {Button} 组件,因为有一些这个错误

我的错误是什么?

App.tsx

import { InputNumber, Button } from 'antd';
import * as React from 'react';
import './App.css';

import logo from './logo.svg';

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <InputNumber min={1} max={10} defaultValue={3} />
        <Button shape="circle" icon="search" />
        <p className="App">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>

      </div>
    );
  }
}

export default App;

App.css

 @import '~antd/dist/antd.css';

    .App {
      text-align: center;
    }
...

好的,我解决了!

首先,您 add to " declare module 'antd' " 在 [*.d.ts] 文件中 (例如:./images.d.ts)

并添加到 "htmlType" 元素 比如.. <Button type="primary" htmlType="">Primary</Button>

Typescript 是强大的代码! 因此,您可以使用新模块而不是必须添加到 [*.d.ts]

中的模块

我需要你对这个错误的建议 那是谢谢

感谢@Chun-Joo Park

add to " declare module 'antd' " in [*.d.ts] file (ex: ./images.d.ts )

为我工作,并重新启动我的应用程序

yarn start

使用命令npm install @types/module_name

下载模块

或在 [*.d.ts] 文件中声明模块,如下所述