Ant Design 在 TypeScript 中使用

初始化

使用 create-react-app 一步步地创建一个 TypeScript 项目，并引入 antd。

antd 基于最新稳定版本的 TypeScript，请确保项目中使用匹配的版本。

新项目

npx create-react-app my-app --template typescript

添加到已有项目

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

引入 antd

$ npm install antd
$ yarn add antd

使用

修改 src/App.tsx，引入 antd 的按钮组件。

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css，在文件顶部引入 antd 的样式。

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

重新启动 yarn start，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。