重构TypeScript代码有哪些方法和技巧
发布网友
发布时间：2022-04-20 04:21
共1个回答
热心网友
时间：2022-04-11 23:33
二，代码风格。原来代码风格比较乱的话，推荐使用 prettier，简单配置之后跑个命令行脚本（或者在 WebStorm 中调用 prettier 工具）就可以格式化所有代码了，比较省心。也可以用 ESLint 加上 --fix 参数，不过配置相对来说繁琐一些。
三，升级 TS，既然重构的话，TS 推荐直接升级到最新版（目前版本是 2.8），新版的 TS 类型表达能力更强一些，而且升级的 break changes 很少。在 tsconfig.json 中将 noImplicitAny 设置为 true（或者将 strict 设置为 true），完善之前缺失的类型信息。在变量类型都是清晰且确定的情况下，重构其实是挺简单的，所以先补充一下原来缺失的类型信息。如果某个类型需要后续重构的话，可以暂时使用 any，然后在旁边加个 TODO。
四，自底向上的组件重构。重构一些小组件的接口，完善其 props/state 类型信息。重构组件的实现之后，调整调用该组件的代码（WebStorm：Find Usages，然后根据 TS 报错信息填上正确的 props 即可）。一般来说，小组件的重构不会导致整个应用跑不起来，重构过程中可以在旁边打开前端应用，重构完成之后网页表现和原来一样的话就说明重构没啥问题。
五，自顶向下的状态重构。使用 React 的话，顶层组件的状态一般比较丰富，我们也往往会使用 Rex 来管理应用全局状态。许多子组件都会依赖这些全局状态（或是顶层组件的状态），所以最好使用 type/interface 关键字将这些状态的类型显式地写出来。例如下图就是一个前端应用的 Rex store 管理的状态。其他地方（例如调用 react-rex 的 connect 函数）使用 State 就能方便的引用该类型了。
