antd 在 React 应用程序中但无法编译
antd in react app but failed to compile
antd教程在typescript中的使用
- 创建 React 应用程序...确定
- yarn 添加 antd ...ok
- 在 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] 文件中声明模块,如下所述
antd教程在typescript中的使用
- 创建 React 应用程序...确定
- yarn 添加 antd ...ok
- 在 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] 文件中声明模块,如下所述