mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
Add use in TypeScript instruction (#8230)
This commit is contained in:
Wei Zhu
GitHub
parent
cd67045e11
commit
2de0a6a522
@ -120,6 +120,7 @@ Properties for row selection.
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
|
||||
| fixed | Fixed selection column on the left | boolean | - |
|
||||
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
|
||||
| selectedRowKeys | Controlled selected row keys | string\[] | \[] |
|
||||
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - |
|
||||
|
||||
@ -120,6 +120,7 @@ const columns = [{
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
|
||||
| fixed | 把选择框列固定在左边 | boolean | - |
|
||||
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
|
||||
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
|
||||
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
|
||||
|
||||
240
docs/react/use-in-typescript.en-US.md
Normal file
240
docs/react/use-in-typescript.en-US.md
Normal file
@ -0,0 +1,240 @@
|
||||
---
|
||||
order: 5
|
||||
title: Use in TypeScript
|
||||
---
|
||||
|
||||
Let's create a TypeScript project by using `create-react-app`, then import `antd` step by step.
|
||||
|
||||
---
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Ensure your system has installed latest version of [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/).
|
||||
|
||||
Create a new project named `antd-demo-ts` using yarn.
|
||||
|
||||
```bash
|
||||
$ yarn create react-app antd-demo-ts --scripts-version=react-scripts-ts
|
||||
```
|
||||
|
||||
If you are using npm (we will use yarn in the following instructions, it's ok to replace yarn with npm)
|
||||
|
||||
```bash
|
||||
$ npm install -g create-react-app
|
||||
$ create-react-app antd-demo-ts --scripts-version=react-scripts-ts
|
||||
```
|
||||
|
||||
Then we go inside `antd-demo-ts` and start it.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo-ts
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
import Button from 'antd/lib/button';
|
||||
import './App.css';
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Add `antd/dist/antd.css` at the top of `src/App.css`.
|
||||
|
||||
```css
|
||||
@import '~antd/dist/antd.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
Now you may see following error on the browser, this is because there are many implicitly `any` types in antd's codebase ([please help us improving type definition](https://github.com/ant-design/ant-design/issues/5627).
|
||||
|
||||
> error TS7006: Parameter 'e' implicitly has an 'any' type.
|
||||
|
||||
You need setting `skipLibCheck` to `true` in tsconfig.json, then TypeScript will skip type checking for third party libraries.
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
...,
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Ok, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||
|
||||
## Advanced Guides
|
||||
|
||||
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo-ts.
|
||||
For instance, we actually import all styles of components in the project which may be a network performance issue.
|
||||
|
||||
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
|
||||
|
||||
Import react-app-rewired and modify the `scripts` field in package.json.
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired --dev
|
||||
```
|
||||
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
+ "start": "react-app-rewired start --scripts-version react-scripts-ts",
|
||||
- "build": "react-scripts build",
|
||||
+ "build": "react-app-rewired build --scripts-version react-scripts-ts",
|
||||
- "test": "react-scripts test --env=jsdom",
|
||||
+ "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
|
||||
}
|
||||
```
|
||||
|
||||
Then create a `config-overrides.js` at root directory of your project for further overriding.
|
||||
|
||||
```js
|
||||
module.exports = function override(config, env) {
|
||||
// do stuff with the webpack config...
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
### Use ts-import-plugin
|
||||
|
||||
[ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) is a TypeScript plugin for importing components on demand ([How does it work?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`.
|
||||
|
||||
```bash
|
||||
$ yarn add ts-import-plugin --dev
|
||||
```
|
||||
|
||||
```js
|
||||
/* config-overrides.js */
|
||||
const tsImportPluginFactory = require('ts-import-plugin')
|
||||
const { getLoader } = require("react-app-rewired");
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
const tsLoader = getLoader(
|
||||
config.module.rules,
|
||||
rule =>
|
||||
rule.loader &&
|
||||
typeof rule.loader === 'string' &&
|
||||
rule.loader.includes('ts-loader')
|
||||
);
|
||||
|
||||
tsLoader.options = {
|
||||
getCustomTransformers: () => ({
|
||||
before: [ tsImportPluginFactory({
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'es',
|
||||
style: 'css',
|
||||
}) ]
|
||||
})
|
||||
};
|
||||
|
||||
return config;
|
||||
}
|
||||
```
|
||||
|
||||
Remove the `@import '~antd/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
||||
|
||||
```diff
|
||||
import * as React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import './App.css';
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Then reboot with `yarn start` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/react/getting-started#Import-on-Demand).
|
||||
|
||||
### Customize Theme
|
||||
|
||||
According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) to achieve this. Import it and modify `config-overrides.js` like below.
|
||||
|
||||
```bash
|
||||
$ yarn add react-app-rewire-less --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
const tsImportPluginFactory = require('ts-import-plugin')
|
||||
const { getLoader } = require("react-app-rewired");
|
||||
+ const rewireLess = require('react-app-rewire-less');
|
||||
|
||||
module.exports = function override(config) {
|
||||
const tsLoader = getLoader(
|
||||
config.module.rules,
|
||||
rule =>
|
||||
rule.loader &&
|
||||
typeof rule.loader === 'string' &&
|
||||
rule.loader.includes('ts-loader')
|
||||
);
|
||||
|
||||
tsLoader.options = {
|
||||
getCustomTransformers: () => ({
|
||||
before: [ tsImportPluginFactory({
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'es',
|
||||
- style: 'css',
|
||||
+ style: true,
|
||||
}) ]
|
||||
})
|
||||
};
|
||||
|
||||
+ config = rewireLess.withLoaderOptions({
|
||||
+ modifyVars: { "@primary-color": "#1DA57A" },
|
||||
+ })(config, env);
|
||||
|
||||
return config;
|
||||
}
|
||||
```
|
||||
|
||||
We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after rebooting the start server.
|
||||
|
||||
## Alternative way
|
||||
|
||||
You can also follow instructions in [Use in create-react-app](/docs/react/use-with-create-react-app.en-US.md), then use [react-app-rewire-typescript][https://github.com/lwd-technology/react-app-rewire-typescript] to setup the TypeScript development environment by yourself.
|
||||
|
||||
## FAQ
|
||||
|
||||
### error TS7006: Parameter 'x' implicitly has an 'any' type.
|
||||
|
||||
You need setting `skipLibCheck` to `true` in tsconfig.json.
|
||||
|
||||
### error TS2605: JSX element type Xxx is not a constructor function for JSX elements.
|
||||
|
||||
Before antd 3, You need setting `allowSyntheticDefaultImports` to `true` in tsconfig.json.
|
||||
|
||||
241
docs/react/use-in-typescript.zh-CN.md
Normal file
241
docs/react/use-in-typescript.zh-CN.md
Normal file
@ -0,0 +1,241 @@
|
||||
---
|
||||
order: 5
|
||||
title: 在 TypeScript 中使用
|
||||
---
|
||||
|
||||
使用 `create-react-app` 一步步地创建一个 TypeScript 项目，并引入 antd。
|
||||
|
||||
---
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
请确保电脑上已经安装了最新版的 [yarn](https://yarnpkg.com) 或者 [npm](https://www.npmjs.com/)。
|
||||
|
||||
使用 yarn 创建项目。
|
||||
|
||||
```bash
|
||||
$ yarn create react-app antd-demo-ts --scripts-version=react-scripts-ts
|
||||
```
|
||||
|
||||
如果你使用的是 npm（接下来我们都会用 yarn 作为例子，如果你习惯用 npm 也没问题）。
|
||||
|
||||
```bash
|
||||
$ npm install -g create-react-app
|
||||
$ create-react-app antd-demo-ts --scripts-version=react-scripts-ts
|
||||
```
|
||||
|
||||
然后我们进入项目并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo-ts
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
修改 `src/App.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
import Button from 'antd/lib/button';
|
||||
import './App.css';
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
修改 `src/App.css` 引入 antd 的样式。
|
||||
|
||||
```css
|
||||
@import '~antd/dist/antd.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
这个时候你可能会碰到下面类似的错误，这是因为 antd 的类型定义还不完善（[帮助我们完善类型定义](https://github.com/ant-design/ant-design/issues/5627)）。
|
||||
|
||||
> error TS7006: Parameter 'e' implicitly has an 'any' type.
|
||||
|
||||
修改 tsconfig.json 设置 `skipLibCheck` 为 `true` 跳过对第三方库的类型检查。
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
...,
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
重新启动 `yarn start`，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)。
|
||||
|
||||
## 高级配置
|
||||
|
||||
我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
|
||||
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。
|
||||
|
||||
引入 react-app-rewired 并修改 package.json 里的启动配置。
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired --dev
|
||||
```
|
||||
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
+ "start": "react-app-rewired start --scripts-version react-scripts-ts",
|
||||
- "build": "react-scripts build",
|
||||
+ "build": "react-app-rewired build --scripts-version react-scripts-ts",
|
||||
- "test": "react-scripts test --env=jsdom",
|
||||
+ "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
|
||||
}
|
||||
```
|
||||
|
||||
然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。
|
||||
|
||||
```js
|
||||
module.exports = function override(config, env) {
|
||||
// do stuff with the webpack config...
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
### 使用 ts-import-plugin
|
||||
|
||||
[ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 是一个用于按需加载组件代码和样式的 TypeScript 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config-overrides.js` 文件。
|
||||
|
||||
```bash
|
||||
$ yarn add ts-import-plugin --dev
|
||||
```
|
||||
|
||||
```js
|
||||
/* config-overrides.js */
|
||||
const tsImportPluginFactory = require('ts-import-plugin')
|
||||
const { getLoader } = require("react-app-rewired");
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
const tsLoader = getLoader(
|
||||
config.module.rules,
|
||||
rule =>
|
||||
rule.loader &&
|
||||
typeof rule.loader === 'string' &&
|
||||
rule.loader.includes('ts-loader')
|
||||
);
|
||||
|
||||
tsLoader.options = {
|
||||
getCustomTransformers: () => ({
|
||||
before: [ tsImportPluginFactory({
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'es',
|
||||
style: 'css',
|
||||
}) ]
|
||||
})
|
||||
};
|
||||
|
||||
return config;
|
||||
}
|
||||
```
|
||||
|
||||
然后移除前面在 `src/App.css` 里全量添加的 `@import '~antd/dist/antd.css';` 样式代码，并且按下面的格式引入模块。
|
||||
|
||||
```diff
|
||||
import * as React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import './App.css';
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
最后重启 `yarn start` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/react/getting-started#按需加载)。
|
||||
|
||||
### 自定义主题
|
||||
|
||||
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 react-app-rewire 的 less 插件 [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) 来帮助加载 less 样式，同时修改 `config-overrides.js` 文件。
|
||||
|
||||
```bash
|
||||
$ yarn add react-app-rewire-less --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
const tsImportPluginFactory = require('ts-import-plugin')
|
||||
const { getLoader } = require("react-app-rewired");
|
||||
+ const rewireLess = require('react-app-rewire-less');
|
||||
|
||||
module.exports = function override(config) {
|
||||
const tsLoader = getLoader(
|
||||
config.module.rules,
|
||||
rule =>
|
||||
rule.loader &&
|
||||
typeof rule.loader === 'string' &&
|
||||
rule.loader.includes('ts-loader')
|
||||
);
|
||||
|
||||
tsLoader.options = {
|
||||
getCustomTransformers: () => ({
|
||||
before: [ tsImportPluginFactory({
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'es',
|
||||
- style: 'css',
|
||||
+ style: true,
|
||||
}) ]
|
||||
})
|
||||
};
|
||||
|
||||
+ config = rewireLess.withLoaderOptions({
|
||||
+ modifyVars: { "@primary-color": "#1DA57A" },
|
||||
+ })(config, env);
|
||||
|
||||
return config;
|
||||
}
|
||||
```
|
||||
|
||||
这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，
|
||||
变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。
|
||||
|
||||
修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。
|
||||
|
||||
## 其他方案
|
||||
|
||||
你也可以根据 [在 create-react-app 中使用](/docs/react/use-with-create-react-app.zh-CN.md) 的介绍使用 [react-app-rewire-typescript][https://github.com/lwd-technology/react-app-rewire-typescript] 自己来配置 TypeScript 的开发环境。
|
||||
|
||||
## 常见问题
|
||||
|
||||
### error TS7006: Parameter 'x' implicitly has an 'any' type.
|
||||
|
||||
需要在 tsconfig.json 的 `compilerOptions` 中配置 `"skipLibCheck": true`。
|
||||
|
||||
### error TS2605: JSX element type Xxx is not a constructor function for JSX elements.
|
||||
|
||||
antd 3 以前的版本需要在 tsconfig.json 的 `compilerOptions` 中配置 `"allowSyntheticDefaultImports": true`。
|
||||
Loading…
Reference in New Issue
Block a user