如何为类动态添加带类型方法？实现类型安全的def函数

一、TypeScript类型系统内的原生解决方案 #

不用额外工具，只需要优化def函数的泛型类型定义，就能让TypeScript自动推断并合并方法类型到目标类的原型上，无需手动编写接口。

修改后的def函数实现（带类型约束）：

// 定义构造函数类型
type Constructor<T = {}> = new (...args: any[]) => T;

function def<T extends Constructor, U>(klass: T, fns: U): T & { prototype: T['prototype'] & U } {
  for (let k in fns) {
    Object.defineProperty(klass.prototype, k, {
      value: fns[k],
      enumerable: false,
      writable: true,
      configurable: true
    });
  }
  return klass as T & { prototype: T['prototype'] & U };
}

使用示例：

// TypeScript会自动识别Cat原型上的meow方法及其类型
const Cat = def(function() {}, {
  meow: function(message: string) { console.log('meow ' + message) },
});

const cat = new Cat();
cat.meow('I want food'); // 类型检查通过
cat.meow(123); // TypeScript直接报错：参数类型不匹配

核心原理是通过泛型U捕获传入的方法对象的完整类型，再将其合并到目标类的原型类型上，让TypeScript能识别新增的方法并提供类型校验。

二、借助Babel AST转换实现自动类型注入 #

完全可以通过Babel AST转换技巧实现，核心逻辑如下：

• 遍历代码AST，定位所有def函数的调用节点
• 解析def的第二个参数（方法对象），提取每个方法的参数类型、返回值类型
• 自动生成对应的类型声明（比如接口），并将目标构造函数与该类型关联
• 将生成的类型代码注入到当前文件中，让TypeScript自动识别

举个简化的实现思路：

1. 识别CallExpression节点，确认调用的函数是def
2. 提取第二个参数ObjectExpression的所有属性，解析每个方法的函数签名
3. 生成类似interface CatProto { meow(message: string): void }的接口，并将Cat构造函数的原型类型指定为该接口
4. 将生成的接口代码插入到文件头部或合适位置

这种方式可以完全省略手动类型编写，由Babel插件自动完成类型声明的生成，保持业务代码的简洁性。

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