#React+TS4
React开发框架
一、 使用yarn
a) yarn.lock
二、 npx create-react-app my-app
a) 参考: zh-hans.reactjs.org/docs/create…
三、 配置绝对路径
a) tsconfig.js
i. 添加 baseUrl 为 ./src
四、 配置eslint、prettier、commitlint
a) 代码格式化：prettier
i. 安装流程，参考地址：prettier.io/
- PS：使用pre-commit方式在提交前自动格式化代码
ii. 配置pre-commit Hook，参考地址：prettier.io/docs/en/pre…
iii. 防止不同IDE产生不同的编码风格
b) 代码格式化：eslint
i. eslint 协助pritter，pritter优先
ii. 参考地址：prettier.io/docs/en/ins…
c) 提交信息格式化：commitlint
i. 安装
ii. 配置命令：npx husky add .husky/commit-msg "yarn commitlint --edit $1"
iii. commit信息格式化
iv. 参考地址：github.com/conventiona…
五、 Mock
a) json-server
b) 安装
i. 参考地址：github.com/typicode/js…
六、 TS类型
a) qs库需要通过 yarn add @types/qs -D 由JS转成TS；
b) 每一个方法都需要定义传入参数的类型，通过interface定义，或者在定义的变量的同时制定其类型；
c) 尽量避免使用any这个类型；
d) 数据类型
i. 除了number, string, Boolean, bigint, symbol, null, or undefinded，其他都是object
ii. tuple“数量固定，类型各异”的数组
iii. unknown是一个“严格”版的any
iv. .d.ts文件是 JS文件+.d.ts文件===ts文件
v. ts中如果函数没有定义返回值的类型，ts会自动根据函数上下文决定返回类型；
vi. 面向接口编程，不是面向对象编程
七、 css-in-js方案：emotion
八、 grid和flex
a)
