JS 升级到 TS 的三种策略.png
前言
折腾、折腾、折腾，今天终于在项目中用上了 TS，但是 TS 的学习成本还是挺高的，有点抗拒，结果今天一用。
口说无凭，我给大家举个我们项目中的一个例子。相信每一个项目都会有组件，组件的好处就是复用，也就是说我们用的时候简单的配置下就行了，这时候就有个问题，也是大家最容易吐槽的，没有文档。不过话说回来，就是有文档，又🈶️谁能做到文档的简洁易懂如 Vue。
说回文档，一般文档我喜欢在组件的根目录下新建一个 readme.md 文件来写，当然有的人喜欢通过注释，有没有一种方法让代码即注释呢——有，看例子。
下面代码是 table 表头的一些属性，如果没有文档说明，我去新开发或维护第一眼看到这么多的参数，肯定是蒙的，必须硬着头皮去看逻辑实现。
const ORDER_PLAN_PAGE_ID = {
columns: [
{ id: "status", order: 1, show: true, fixed: false, isDefault: true, width: 100 },
{ id: "desc", order: 3, show: true, fixed: false, isDefault: true, width: 150 },
{ id: "userName", order: 9, show: true, fixed: "right", isDefault: true, width: 120 },
],
};
export default {
ORDER_PLAN_PAGE_ID,
};
但是当我用上了 TS 之后：
interface Icolumns {
id: string;
order: number;
width: number;
show: boolean;
fixed: boolean | string;
isDefault: boolean;
}
interface ItableProps {
columns: Array<Icolumns>;
}
const ORDER_PLAN_PAGE_ID = {
columns: [
{ id: "status", order: 1, show: true, fixed: false, isDefault: true, width: 100 },
{ id: "desc", order: 3, show: true, fixed: false, isDefault: true, width: 150 },
{ id: "userName", order: 9, show: true, fixed: "right", isDefault: true, width: 120 },
],
};
export default {
ORDER_PLAN_PAGE_ID,
};
通过接口来约束配置，非常清晰明了，还少了写文档的麻烦。
总结： 大家一定要早早的培养自己的类型思维，这真是利己利他的大好事。
正文
为了培养我们缺失的类型思维，我们需要使用 TS，可是我们知道切到 TS 并没有那么容易，有两个很大的痛点：
- 项目太大，重构非常的麻烦
- TS 有学习成本，应该渐进式升级，而不是断崖式升级
因此 TS 的升级也不是一蹴而就的，依据对 JS 的兼容性可分为三种策略：
- 共存策略
- 宽松策略
- 严格策略
共存策略
共存策略: 即 JS 和 TS 共存，存在的 JS 文件，我们还可以决定对其是否进行类型检查。
配置 tsconfig.json 文件的 allowJs 字段即可开启 JS。
{
"compilerOptions": {
"allowJs": true
}
}
如果你想对 JS 文件进行类型检查，只需要添加字段 checkJs 并设置位 true，因为它默认为 false。
{
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
}
在 JS 中还有些关于类型检查的注释语法可以使用，常用的可以参考：JS 项目中类型系统的分级
目前我司使用的就是这种策略，平时开发过程中进行慢慢的重构，使用这种策略需要注意一点，那就是 JS 中无论如何不能使用 TS/TSX，所以对于项目中的 JS 文件，能重构最好，不能重构就，有 JSX 语法，就命名为 .jsx 文件，这个可以兼容 TS/TSX 的，如果是单纯的 JS ，重构为 TS 就很简单。
宽松策略
宽松策略: 没有 JS 文件，但类型检查使用最宽松的模式。
我司比较坑，项目文件全部都是 JS 结尾的，如果想升级到 TS ，根本没法通过写脚本文件，把 JS 文件变成 TS 文件，JSX 文件变成 TSX 文件，无奈采用了第一种共存策略。
不过说实话，我本身对这个策略，也不是很感冒，因为采用的是最宽松的策略，可能导致一次升完级，开启严格模式之后再次进行重构，而且此时的类型检查，会有一定的 JS 遗留问题，这种歌策略费时费力，不建议。
这个升级办法也很简单，allowJs、checkJs 和 strict 都为 false 或者不写，然后所有地方的类型声明全部都使用 any。
严格策略
严格策略: 没有 JS 文件且 strict 为 true。
这个没啥好讲的，升级的最终目的就是在项目中全部使用 TS 编程，如果你有足够的耐心，升级项目也可一步到位，直接使用严格策略。
如果不行的话，就只能慢慢升级或者期望 TS 新项目。
网友评论