reactjs - 具有继承的对象分配在 typescript 中不起作用

Question

当我在 Angular 项目中使用它时，代码可以正常工作，然后我决定转移到 React，但代码无法正常工作。

class A {
  constructor(...parts: Partial<A>[]) {
    Object.assign(this, ...parts);
  }
}

class B extends A {
  id: string;
  constructor(...parts: Partial<B>[]) {
    super(...parts);

  }
}

const a = new B({ id: '123' });
console.log(a);

控制台日志的输出是 B {id: undefined} 我希望它是 B {id: '123'}

这里是 tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": false
  },
  "include": [
    "src"
  ]
}

这是版本:

+ @types/jest@24.0.9
+ react-scripts@2.1.5
+ @types/react-dom@16.8.2
+ react@16.8.3
+ @types/react@16.8.6
+ typescript@3.3.3333
+ react-dom@16.8.3
+ @types/node@11.10.4
+ create-react-app@2.1.5

重现的最少步骤:

• create-react-app 测试 --typescript
• 将代码添加到 App.tsx
• 运行并查看控制台

更新:

我最终使用了以下解决方案:

class B extends A {
  id: string = this.id;

Answer 1

这是一个 known problem .它在 TypeScript 中不存在。原因是 create-react-app TypeScript 支持使用 TypeScript 进行类型检查，并使用 Babel 进行转译。

这个TS代码

class B extends A {
  id: string;
  ...
}

转化为这个ES。下一段代码:

class B extends A {
  id;
  ...
}

根据 class field proposal ，未分配的 id 字段被转换为 this.id = undefined。

为了使用符合 TypeScript 的行为，需要更改设置以使用 @babel/plugin-transform-typescript 转译为 ES5 或使用 TypeScript 而不是 Babel，例如弃用 react-scripts-ts。