1.创建项目

使用create-react-app创建React+Typescript项目

npx create-react-app you-react-app-name --template typescript

2.配置项目

文件引用

当我们用相对路径引用文件时，会出现嵌套多层的情况。比如import {xxx} from '../../../utils'。
这样在项目后期文件很多的情况下，头会晕掉。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "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,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

我们在compilerOptions下面添加baseUrl指向src即可。

代码规范

代码重度洁癖福音，prettier+Eslint，妈妈再也不用担心我写代码的时候犯病了。

prettier配置

官方文档

1. 安装

   yarn add --dev --exact prettier

2. echo {}> .prettierrc.json

   在项目根目录下新建文件 .prettierrc.json

3. 新建.prettierignore 不需要格式化的文件

   # Ignore artifacts:
   build
   coverage

4. 自动格式化

   npx mrm lint-staged 如果是失败使用 npx mrm@2 lint-staged

修改package.json中的lint-staged

"lint-staged": {
  "*.{js,css,md,ts,tsx}": "prettier --write"
}

1. 解决eslint和prettier的冲突 ```shell yarn add eslint-config-prettier -D

修改package.json “eslintConfig”: { “extends”: [ “react-app”, “react-app/jest”, “prettier” ] },

6. 测试是否成功
```typescript
//随便写点不符合规范的代码然后 git add . > git commit -m 'xxx' 测试你的配置有没有成功
var a=1
var b=2
console.log(a+b)

git提交规范

官方文档
安装

yarn add @commitlint/config-conventional @commitlint/cli -D //window
npm install --save-dev @commitlint/{config-conventional,cli}//mac
//创建commitlint.config.js
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "build",
        "ci",
        "chore",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
      ],
    ],
  },
};
//   build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
//   ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
//   docs：文档更新
//   feat：新增功能
//   fix：bug 修复
//   perf：性能优化
//   refactor：重构代码(既没有新增功能，也没有修复 bug)
//   style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
//   test：新增测试用例或是更新现有测试
//   revert：回滚某个更早之前的提交
//   chore：不属于以上类型的其他类型
对于 Husky 的版本4和版本以下，请在 package.json 中使用以下语法
"husky": {
 "hooks": {
  "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
 }
},
或者 执行 npx husky add .husky/commit-msg 'commitlint --edit $1'

测试下 git commit -m 'build: xxxxxxxxxxxxx'

mock方案

jsonserver

Typescript utility type

Parameters

读取函数参数的类型.
例子:

const add = (x:number,y:number)=>{
    return x+y
}
type Param = Parameters<typeof add>  //Param=>[x:number,y:number]

Partial

将一个类型变为可选类型
例子:

type Person = {
    name:string,
  age:number
}
const somePerson:Parital<Person> = {
    name:'xiaofang'
}

Omit

将一个类型删除某些属性
例子:

type Person = {
    name:string,
  age:number
}
const somePerson:Omit<Person,'name'|'age'> = {}

Pick

在一个类型选择某些属性
例子:

type Person = {
    name:string,
  age:number
}
const somePerson:Pick<Person,'name'> = {
    name:'xiaofang'
}

Exclude

在一个联合类型排除某些key
例子:

type Age = Exclude<keyof Person,'name'>

CSS in JS

emotion
yarn add @emotion/react @emotion/styled

React Hook

useState与useReducer

两个hook在功能上是可以互换的，useState适合于定义单个的状态，useReducer适合定义一群会互相影响的状态。

redux

redux-toolkit
yarn add react-redux @reduxjs/toolkit
react-toolkit在内部集成了immer第三方库，所以我们可以直接对state.xxx进行对象属性改变，不用担心state的引用问题。

react缓存

react-query
swr

react性能优化

代码分割

React.lazy

React.memo (浅对比)