渐进式迁移TypeScript

使用create-react-app

由于老项目使用的react-app-rewired，为了更好的适配TypeScript，这里首先使用create-react-app这套构建方案替换react-app-rewired！

- npm uninstall -g crete-react-app
- yarn global add create-react-app
- yarn create react-app my-app --template typescript
- yarn add typescript
- yarn add @types/react
- yarn add @types/react-dom
- yarn install
- yarn start

渐进式迁移策略

共存策略

含义

原JavaScript代码不动，新增代码都用TypeScript编写

步骤

1.添加ts(x) 文件
2.安装typescript
3.选择构建工具
保留Babel

• 安装@babel/preset-typescript
• 修改Webpack配置
• 添加tsc –watch模式

放弃Babel

• 安装ts-loader
• 修改Webpack配置

4.检查JavaScript
allowJs: true
checkJs: true

5.处理JavaScript报错
// @ts-nocheck
JSDOC注释

宽松策略

含义

将所有的js(x)文件重命名为ts(x)文件，在不修改代码的基础上，使用最宽松的类型检查规则

步骤

1.重命名文件(shelljs)
2.修改Webpack入口
3.strict: false

严格策略

含义

开启最严格的类型检查规则，处理剩余的报错

步骤

• strict: true
• 处理报错

axios的封装 🚀

安装进度条

yarn add nprogress @types/nprogress

• request.ts
• http.js

JS项目–TS项目迁移官方例子