导出的TypeScript类方法中this为undefined问题求助

你遇到的问题核心是类方法的this绑定在跨环境调用时丢失——虽然TypeScript测试环境能正确处理this指向，但编译后的ES5代码在纯JS项目中调用时，this的绑定规则因环境或调用逻辑发生了变化。下面是几个针对性的解决方案：

方案1：用箭头函数绑定this到实例 #

将类方法改为箭头函数，这样this会被永久绑定到类实例，无论后续以何种方式调用该方法，this都不会丢失：

export class MyClass {
    public myValue: number;
    constructor(val: number) {
        this.myValue = val;
    }
    // 改为箭头函数，自动绑定实例this
    logValue = () => {
        console.log(this);
        console.log(this.myValue);
    }
}

编译后，该方法会成为实例的自有属性（而非原型方法），从根源上避免了this绑定丢失的问题，这是最直接的解决方式。

方案2：调用时手动绑定this #

如果无法修改类的源码，可以在调用方法时手动将this绑定到实例：

import { MyClass } from 'myProject'
const x = new MyClass(5);

// 方式1：使用bind绑定this
x.logValue.bind(x)();

// 方式2：用箭头函数包裹调用
(() => x.logValue())();

这种方式适合临时解决特定调用场景的问题，比如将方法作为回调函数传递时。

方案3：优化TypeScript编译配置 #

在tsconfig.json中添加esModuleInterop选项，优化CommonJS与ES模块的互操作性，避免因模块导入方式导致的隐式this问题：

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "./lib",
    "allowJs": true,
    "target": "es5",
    "lib": [
      "es7",
      "es2015.symbol",
      "es2015.symbol.wellknown"
    ],
    // 添加该选项优化模块互操作
    "esModuleInterop": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

重新编译后再导入JS项目测试，很多模块互操作导致的奇怪问题都会被解决。

为什么TypeScript测试正常？ #

你的TS测试环境（比如Jest）通常会隐式处理模块导入、this绑定等细节，而纯JS项目没有这些预设处理，导致原本在TS环境中正常的this绑定出现异常。

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