打字稿继承属性在函数中初始化被覆盖

Question

一些背景知识，我正在将我的源代码从 Create React App 迁移到 Next.JS 并且 TypeScript 的编译方式不同。

看这个例子：

abstract class Parent {
  constructor(val: any) {
    this.init(val);
  }

  abstract init(val: any);
}

class Child extends Parent {
  foo: string;

  constructor(val: string) {
    super(val);
  }

  init(val: any) {
    this.foo = val;
  }
}

const i = new Child('test');
console.log(i.foo);

我希望 console.log 打印 test 但它却打印 undefined （在 TypeScript Playground 中尝试过并按预期工作）。

问题是我不确定是哪个配置导致了这种奇怪的行为，我的第一个怀疑是 tsconfig --> strictPropertyInitialization 试图将其设置为 false 但没有任何改变。

这是我的 tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "lib": [
      "es5",
      "es6",
      "dom",
      "es2015",
      "es2017"
    ],
    "moduleResolution": "node",
    "allowJs": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false
  }
}

非常感谢任何帮助，

托默。

Answer 1

因为您的目标是 ESNext，JavaScript 输出将类似于以下示例，在现代浏览器中输出 "test".

class Parent {
    constructor(val) {
        this.init(val);
    }
}
class Child extends Parent {
    constructor(val) {
        super(val);
    }
    init(val) {
        this.foo = val;
    }
}
const i = new Child('test');
console.log(i.foo);

如果您尝试运行在不支持 ECMAScript class 语法的较旧的运行时间，这将不起作用。

打字稿继承属性在函数中初始化被覆盖

Typescript inherited property initialized in a function is overwritten

javascript

typescript

webpack

create-react-app

next.js

打字稿继承 属性 在函数中初始化被覆盖

Typescript inherited property initialized in a function is overwritten

javascript

typescript

webpack

create-react-app

next.js

打字稿继承属性在函数中初始化被覆盖