在使用 create-react-app 時(shí),指定了語(yǔ)言為 TypeScript:
create-react-app charley-react-typescript --scripts-version=react-scripts-ts
在使用 Antd UI庫(kù)時(shí),引入相關(guān)的組件:
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 內(nèi)容如下:
@import '~antd/dist/antd.css';
運(yùn)行 yarn start,打開(kāi)瀏覽器,發(fā)現(xiàn)報(bào)了一個(gè)錯(cuò)誤:
Import sources within a group must be alphabetized.
這是由于 tslint 規(guī)定了必須按順序?qū)胛募采w這個(gè)規(guī)則,需要在根目錄的的 tslint.json 中增加以下配置:
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "rules": {
+ "ordered-imports": false
+ },
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
}
}
然后重啟服務(wù),運(yùn)行 yarn start,就不會(huì)再報(bào)這個(gè)錯(cuò)誤了。
完。