介绍 @ts-migrating：升级 TSConfig 的最佳方法

关注【索引目录】服务号，更多精彩内容等你来探索！

TypeScript 发展迅速，你tsconfig应该跟上。但是，升级 TypeScript 设置（例如strict、noUncheckedIndexedAccess或 ）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而 仅针对由 new 引入的错误compilerOptions。这使得该指令的意图更加明确，并确保了其余行类型的安全。

工作原理

要安装，只需运行：

npm install -D ts-migrating

该工具有两个部分：

1.语言服务插件

将其添加到tsconfig.json您的 IDE 中：

• 显示升级选项引入的新错误
• 允许你使用以下方式静音特定线路// @ts-migrating

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-migrating",
        "compilerOptions": {
          "noUncheckedIndexedAccess": true
        }
      }
    ]
  }
}

tsc此插件仅影响 IDE 和开发环境。它对生产环境构建没有任何影响。

2. CLI 工具

独立 CLI 有 2 个主要命令。

使用插件进行类型检查

由于 ts 插件对 没有影响tsc，您可以在终端/CI 中使用以下命令。

npx ts-migrating check

这将tsc与插件一起运行并报告新配置引入的所有错误。

注释你的错误

npx ts-migrating annotate

这会// @ts-migrating在每个新的错误行上方插入。请小心。请使用干净的 git state 运行并查看更改。

真实示例：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

如果您喜欢这个想法，请给该 repo 一颗星，在您的项目中尝试它，并让我知道它的进展。

关注【索引目录】服务号，更多精彩内容等你来探索！