Question

antd教程在打字稿中的使用

创建React应用...确定
添加纱线antd ...确定
在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;
    }
...

Answer 1

好，我解决了！

首先，您在[* .d.ts]文件中add to " declare module 'antd' " （例如：./images.d.ts）

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

Typescript是强代码！因此，您可以使用新模块，而不必在[* .d.ts]

中添加模块

，对于这个错误，我需要您的建议那是谢谢的

Answer 2

感谢@ Chun-Joo Park

添加到[* .d.ts]文件中的“声明模块'antd'”（例如：./images.d.ts）

为我工作，然后重新启动我的应用程序

yarn start

Answer 3

使用命令npm install @types/module_name

下载模块

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

antd在React应用中但无法编译

3 个答案: