导出的打字稿类函数将“ this”记录为未定义

Question

我目前有一个可在构造函数中设置类值的Typescript类。然后，我在类方法中使用“ this”引用这些值。.ts文件可以正常编译而不会发出警告。但是，当我在另一个项目中导入已编译的.js文件时，如果我调用类方法，则会收到错误消息，即未定义。

我用打字稿为文件写了一些测试，它们都工作正常。

这是一个简化的示例。

# class .ts file

export class MyClass {
  public myValue: number;

  constructor(val: number) {
     this.myValue = val;
  }

  logValue() {
     console.log(this);

     console.log(this.myValue);
  }
}


# regular js project importing built .js file

import { MyClass } from 'myProject'

const x = new MyClass(5);

x.logValue(); // error, cannot read property myValue of undefined, first console.log logs 'undefined';

这是我的tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",

        // useTypeInferenceAsMuchAsPossible
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "./lib",
        "allowJs": true,
        "target": "es5",

        "lib": [
            "es7",
            "es2015.symbol",
            "es2015.symbol.wellknown"
        ]
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

谢谢！

Answer 1

这段代码实际上没有错误：

const x = new MyClass(5);
x.logValue();

但是，这将出错：

const x = new MyClass(5);
const logValue = x.logValue;
logValue(); // Error

仅仅是因为this工作原理。

固定

您可以使用箭头功能。更改：

logValue() {
  console.log(this);
  console.log(this.myValue);
}

至 ：

logValue = () => {
  console.log(this);
  console.log(this.myValue);
}