React17+React Hook+TS4 最佳实践

初始化项目：npx create-react-app jira --template typescript

在tsconfig.json中配置baseUrl就可以解决相对路径的问题

使用prettier (opens new window)进行代码格式化统一，使用npm install --save-dev --save-exact prettier安装依赖，在项目根目录使用.prettierrc.json进行配置，使用.prettierignore文件配置不需要格式化的文件，但是默认prettier是手动格式化的，可以借助Pre-commit Hook (opens new window)进行自动格式化，然后再配置ESLint，因为prettier与ESLint有冲突

规范git提交：使用commitlint规范git提交。

mook方案：1. mock.js进行请求拦截，只支持ajax，不支持fetch。2. 接口管理工具，例如swagger，moco，yapi，rap，工具强大，配置复杂；3.json-server，配置简单，自定义高，无法自定义改api文档。

在开发和生产环境使用不同变量：.env是生产环境变量，.env.development是开发环境变量，在代码中使用process.env.[变量名]使用，在npm start时候使用开发环境，当npm build时使用生产环境

RestAPI：GET是查询，POST是增加，PUT是替换（全量替换），PATCH是修改（修改一部分）

符号?.，使用[表达式].[属性]时，如果表达式是undifined，这个代码会报错，可以将其改为[表达式]?.[属性]就不会报错了

使用模块qs，可以将一个对象转换成为url中的参数形式

使用!!变量可以将任意变量转换为布尔值，变量*1可以将string型数字转为数值型

在onchange事件中，会碰到输入一个汉字，提交很多个拼音的问题，类似下图这样。

解决办法是使用类似于debounce函数

const debounce = (func, delay) => {
    let timeout;
    return (...params) => {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function(){
            func(...params)
        }, delay)
    }

}

Typescript中不常见的数据类型，tuple是“数量固定，类型可以各不相同”的数组，array中的变量类型必须一致。unknown是严格版本的any，可以代替any。ts在很多情况下帮我们自动推断类型，所以有些情况下不需要声明类型。