typescript项目配置-2

1.开始正式写页面之前先选择一个比较好用的ui框架，我选择的是Ant Design。

npm install antd --save

按需加载

npm install babel-plugin-import --save-dev

路由

npm install react-router-dom --save

npm install @types/react-router-dom --save 

hooks检查

npm install eslint-plugin-react-hooks --save -dev

package.json添加 hooks检查：

"eslintConfig": {
  "extends": [
   "react-app",
   "react-app/jest"
  ],
  "plugins": [
   "react-hooks"
  ],
  "rules": {
   "react-hooks/rules-of-hooks": "error",
   "react-hooks/exhaustive-deps": "warn"
  }
 },

这是运行npm start 会有一下报错:

npmerror.png

重新执行 npm install 重新执行。

2.删除src多余文件

在根目录新建typings文件夹

mkdirlist.png

3.配置tsconfig.json

下面是我的配置，

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "sourceMap":false, 
    "jsx": "react-jsx",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": false,
    "downlevelIteration": true
  },
  "include": ["src","./typings"],
  "typeRoots": ["./typings"],
  "exclude": [
    "node_modules",
    "dist",
    "build"
  ],
  "extends": "./paths.json"
}

同级新建paths.json ,解决ts不能识别@路径

{
  "compilerOptions": {
   "baseUrl": "src",
   "paths": {
​    "@/*": ["*"]
   }}
 }

剩下的在项目中用到再下载配置吧（ ~ 。_ 。~ ）