在使用 create-react-app 时,指定了语言为 TypeScript:
create-react-app charley-react-typescript --scripts-version=react-scripts-ts
在使用 Antd UI库时,引入相关的组件:
import * as React from 'react';
import './assets/css/main.css';
import Button from 'antd/lib/button';
class App extends React.Component {
public render() {
return (
<div className='App'>
<Button type='primary'>Button</Button>
</div>
);
}
}
export default App;
main.css 内容如下:
@import '~antd/dist/antd.css';
运行 yarn start
,打开浏览器,发现报了一个错误:
Import sources within a group must be alphabetized.
这是由于 tslint 规定了必须按顺序导入文件,要覆盖这个规则,需要在根目录的的 tslint.json 中增加以下配置:
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "rules": {
+ "ordered-imports": false
+ },
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
}
}
然后重启服务,运行 yarn start
,就不会再报这个错误了。
完。
网友评论