隆重推出 @ts-migrating：升级 TSConfig 的最佳方式
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
🚀 TypeScript 发展迅速，你的代码tsconfig库也应该跟上。但是，升级 TypeScript 设置（例如strict`type`、noUncheckedIndexedAccess`type` 或 `type`）erasableSyntaxOnly通常意味着要处理代码库中数百个类型错误。
这就是我开发的原因@ts-migrating，这是一个插件和 CLI 工具，可以帮助您逐步升级，tsconfig.json而不会破坏您的代码库或团队的开发速度。
😩 升级之痛tsconfig
启用更严格的编译器选项后，你会立即看到大量新的类型错误。这令人应接不暇。实际上，你的团队没有时间一次性修复所有错误，试图这样做只会导致团队精疲力竭和性能倒退。
那么人们会怎么做呢？
他们要么：
- 无限期推迟升级
- 可用作
@ts-ignore或@ts-expect-error作为毛毯补丁
但这两种方法都有缺陷。要么你永远不改进代码库，要么你掩盖问题，有时甚至会隐藏不相关的错误。
🧠 更好的方法：@ts-migrating
@ts-migrating它允许您立即启用所需的编译器选项，同时允许出现问题的代码行回退到旧配置。这是对 TypeScript 迁移的全新诠释：
- 显示新配置引入的类型错误
- 仅修补尚未准备好的行
// @ts-migrating - 逐步修复这些线路，并随着时间的推移移除备用方案。
此插件旨在实现增量式且安全的迁移。事实上，它之所以被称为“增量式” @ts-migrating，正是因为强调的是持续的过程，而非一次性的迁移。
@ts-ignore与会屏蔽行上所有错误并可能掩盖无关问题的指令不同，该指令@ts-migrating仅针对由新指令引入的错误compilerOptions。这使得指令的意图清晰明确，并保证了行类型的其余部分安全无虞。
🔌 工作原理
安装方法很简单，只需运行：
npm install -D ts-migrating
该工具由两部分组成：
1. 语言服务插件
将此添加到您tsconfig.json的 IDE 中，它将：
- 显示升级选项引入的新错误
- 允许您静音特定行
// @ts-migrating
{
"compilerOptions": {
"plugins": [
{
"name": "ts-migrating",
"compilerOptions": {
"noUncheckedIndexedAccess": true
}
}
]
}
}
tsc此插件仅影响集成开发环境 (IDE) 和开发环境，对生产环境构建没有影响。
2. 命令行工具
独立命令行界面有 2 个主要命令。
使用插件进行类型检查
由于 ts 插件对 无效tsc，您可以改为在终端/CI 中使用以下命令。
npx ts-migrating check
该tsc功能与插件一起运行，并报告新配置引入的所有错误。
标注你的错误
npx ts-migrating annotate
这将// @ts-migrating在每个新错误行上方插入代码。请谨慎操作。请在干净的 Git 环境下运行此操作并检查更改。
🧪 真实案例：noUncheckedIndexedAccess
这是一个简单的函数：
function first(xs: number[]): number {
return xs[0]; // error when `noUncheckedIndexedAccess: true`
}
有了@ts-migrating，我们可以暂时允许这条线路回退：
function first(xs: number[]): number {
// @ts-migrating
return xs[0]; // error disappear as this line now fall back to `noUncheckedIndexedAccess: false`
}
✅ 为什么你应该使用它
- 避免大爆炸式迁移
- 防止新的违规行为悄然发生
- 让你的团队逐步升级
- 对建造时间无影响
- 清晰、有目的的代码注释
🌟 准备好迁移了吗？
ts-migrating帮助您实现 TypeScript 配置现代化，而不会让您的代码库变成一片混乱。
您可以在这里找到该项目：
👉 github.com/ycmjason/ts-migrating
如果你喜欢这个想法，请给仓库点个星标，在你的项目中尝试一下，然后告诉我结果如何。
如果您想支持这项工作，请考虑成为GitHub 赞助者。您的每一份支持都至关重要。
让我们tsconfig再次简化升级流程。