为 TypeScript 添加运算符重载。

Question

我正在开发一个需要大量使用向量和矩阵数学的项目，我非常希望能够使用运算符重载。

有一些Babel插件（例如https://github.com/rob-blackbourn/jetblack-operator-overloading）可以为JavaScript启用运算符重载，但它们不适用于TypeScript（或者至少它们不能与VS Code的TS语言服务器一起使用）。虽然有使用// @ts-ignore的解决方法，但我认为它很丑陋，而且会移除下一行的类型检查优势。

我想将代码转换成这样（其中a、b和c是自定义对象）：

a + b * c

翻译为：

将内容转化为类似于这样的形式：

a.__add__(b.__mul__(c))

如果，例如c类型不正确，则函数__mul__无法使用。VS Code应该划线原始行或更好的是符号c。

我想，在将代码传递给TS编译器之前进行转换是可能的（这正是Babel插件所做的）。但是，VS Code将始终显示错误（运算符'+'不能应用于类型'Custom'和'Custom'）。

所以我的问题是：是否有项目实现了上述描述的行为？如果没有，是否可以扩展TypeScript和/或TypeScript语言服务器以此方式？如果可以，请提供其他研究参考的链接。

我还对JSX（在React中使用）如何使用全新的语法与TS完全集成以及是否有其他修改TS的项目感兴趣。

- Nejc Jezersek

Answer 1

Babel 只能对 JavaScript 代码进行转换，因此您需要编写一个自定义的 TypeScript 转换器，并在 ts-loader 上配置该转换器。但是在 ForkTsCheckerWebpackPlugin 检查语法正确性时可能会出现问题。您可能需要关闭此插件。

以下是创建 null 转换器的示例代码：

export function createTransformer (): ts.TransformerFactory<ts.SourceFile> {
  console.log("Hello, I am transformer just created");
  return (context: ts.TransformationContext) => {
    return (sourceFile: ts.SourceFile) => {
      function visit (node: ts.Node): ts.Node {
      return ts.visitNode(sourceFile, visit)
    }
  }
}
export default createTransformer

此外，如果您使用的是Vue框架，您需要配置您的项目，配置文件为vue.config.js。

const PipeTransformer = require('./pipe-transformer').default


module.exports = {
  // .... other configurations 
  chainWebpack: config => {
    // Can not use the ts-pipe-operator plugin, the babel plugin process only javascript not typescript.
    config.module.rule('ts').use('ts-loader').tap(options => {
      options.transpileOnly = true
      options.appendTsSuffixTo = ['\\.vue$']
      options.happyPackMode = false
      options.getCustomTransformers = () => ({
        before: [PipeTransformer()]
      })
      return options
    })
  }
}

- Houcheng