如何强制TypeScript转译原型方法？适配非ES2015系统兼容需求

我来帮你搞定这个坑！你遇到的问题主要是两个点：一是TypeScript转译后的代码可能没把方法正确挂载到原型上，二是要适配不支持ES2015 class语法的旧系统。下面一步步给你解决：

1. 先搞懂问题根源 #

如果你用箭头函数定义类方法，TypeScript会把它编译成实例的自有属性，而不是挂载到原型链上——旧系统没法通过原型链找到这个方法，自然会报错“方法不存在”。另外，如果你的编译目标设得太高（比如ES6+），转译后的代码还是用class语法，旧系统根本不认识。

2. 第一步：配置TypeScript编译目标 #

打开你的tsconfig.json，把target设为ES5（或者更低，看你系统的兼容性要求），这样编译器会自动把class转译为基于原型的ES5代码：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS", // 选适合你系统的模块规范，比如AMD/UMD
    "strict": true // 开启严格模式能避免很多坑
  }
}

3. 正确定义类方法（别用箭头函数！） #

错误写法（会踩坑） #

箭头函数定义的方法会变成实例属性，转译后不在原型上：

class User {
  // 千万别这么写！
  greet = () => {
    console.log("Hi there!");
  };
}

正确写法（原型方法） #

用普通函数定义方法，TypeScript会自动把它挂载到类的原型上：

class User {
  constructor(public username: string) {}

  greet() {
    console.log(`Hello, ${this.username}!`);
  }
}

转译后的ES5代码会是这样的（完全兼容旧系统）：

function User(username) {
  this.username = username;
}

User.prototype.greet = function() {
  console.log("Hello, " + this.username + "!");
};

4. 手动控制原型（极端兼容场景） #

如果你的系统特别老旧，甚至需要更底层的原型操作，可以直接在TypeScript里手动给原型加方法：

class User {
  constructor(public username: string) {}
}

// 手动扩展原型
User.prototype.greet = function() {
  console.log(`Welcome, ${this.username}!`);
};

这样转译后的代码就是纯ES5的原型模式，绝对能在旧系统里跑起来。

5. 验证调用 #

实例化后调用方法，确认能正常执行：

const user = new User("Bob");
user.greet(); // 输出 "Hello, Bob!"

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