如何在TypeScript+Babel项目中配置运算符重载并解决TS编译报错

问题描述 #

我刚接触babel但熟悉typescript，想在TypeScript项目中使用babel的运算符重载特性，整合项目后构建时TypeScript抛出如下错误：

> tsc --emitDeclarationOnly

src/index.ts:30:12 - error TS2365: Operator '+' cannot be applied to types 'import("/TypeScript-Babel-Overload/src/index").Point' and 'import("/TypeScript-Babel-Overload/src/index").Point'.

30 const p3 = p1 + p2
              ~~~~~~~


Found 1 error.

目前已经通过添加@ts-ignore+启用babel插件实现了基础运行，现在需要解决大量使用运算符重载时，每次都要加@ts-ignore的问题。

解决方案 #

1. 错误原因说明 #

出现TS2365报错的根本原因是TypeScript原生不支持运算符重载语法，它本身无法识别你在类中通过Symbol.for('+')定义的运算符逻辑，所以会判定两个自定义类实例相加是非法操作，抛出类型错误。而实际的代码转译和运行逻辑由babel插件处理，所以忽略该类型错误不会影响最终运行效果。

2. 全局/批量忽略报错的可选方案 #

目前TypeScript没有提供单独关闭TS2365错误的配置项，你可以根据自己的使用场景选择以下方案：

方案1：封装通用运算工具函数（最推荐）

只需要写一次忽略注解，后续所有运算操作都调用工具函数即可，同时不会影响其他TS类型检查能力，兼顾便捷性和类型安全：

// 封装在通用工具文件中，只需要写一次注解
function add<T>(a: T, b: T): T {
  // @ts-expect-error: babel operator overloading
  return a + b
}
function sub<T>(a: T, b: T): T {
  // @ts-expect-error: babel operator overloading
  return a - b
}
// 其他运算符同理

// 业务代码中直接调用，不需要再加注解
const p3 = add(p1, p2)

这里用@ts-expect-error替代@ts-ignore更规范，它会标记下一行预期存在类型错误，如果后续该行没有错误了（比如TS更新支持运算符重载、或者你代码写错了），TS会主动提示你删除该注解，避免无效注解残留。

方案2：使用eslint规则批量添加注解

如果你还是想保留直接写p1 + p2的写法，可以配置自定义eslint规则，检测到自定义类实例的运算符操作时自动添加@ts-expect-error注解，不需要手动逐行添加。

方案3：关闭TS严格检查（非常不推荐）

如果实在不想做额外适配，可以在tsconfig.json中关闭严格类型检查：

{
  "compilerOptions": {
    "strict": false
  }
}

但该方案会关闭所有TS严格类型校验，大幅降低项目的类型安全能力，除非是个人演示项目，否则不建议使用。

内容的提问来源于stack exchange，提问作者jerry