可以创建抽象属性吗？

Question

我在 Child 类中有一个如下所示的属性：

formModel = {
    motive: 0,
    coop: 0,
    leadership: 0,
    teamwork: 0,
    community: 0,
    professional: 0,
    role_model: 0,
    supportive: 0,
    problem_solving: 0
};

但在其他子类中，这个属性是不同的。

formModel = {
    motive: 0,
    coop: 0,
    leadership: 0,
    teamwork: 0,
    community: 0,
    professional: 0,
    communication: 0,
    respect: 0,
    morale: 0,
    role_model: 0,
    supp_enviro: 0
};

属性的顺序改变了，名字也改变了。

我想在其 Parent 类中声明此属性的 abstract 版本。这可能吗？我在父级中使用public abstract formModel: Object; 没有这样的运气。

编辑：

这是我得到的错误：

vendor.bundle.js:40839 Uncaught Error: Unexpected value 'undefined' declared by the module 'AppModule'
    at syntaxError (vendor.bundle.js:40839)
    at vendor.bundle.js:54719
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (vendor.bundle.js:54717)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (vendor.bundle.js:66103)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (vendor.bundle.js:66076)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (vendor.bundle.js:66005)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (vendor.bundle.js:71695)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (vendor.bundle.js:71681)
    at Object.../../../../../src/main.ts (main.bundle.js:1339)

我注意到，如果我将以下方法添加到我的父类而不是子类，我只会收到此错误：

public handleRadioButtonChanges(event: Event): void {
    console.log("test");
}

Answer 1

上述问题的答案肯定是是的，您可以创建抽象属性。我可以毫无错误地执行以下操作：

// what are the restrictions on FormModel? 
// See [@amal's answer](https://stackoverflow.com/a/46328720/2887218) 
// for discussion about this
interface FormModel {
  [key: string]: number;
}

abstract class Parent {
  public abstract formModel: FormModel;  
  public handleRadioButtonChanges(event: Event): void {
    console.log("test");
}
}

class Child extends Parent {
  formModel = {
    motive: 0,
    coop: 0,
    leadership: 0,
    teamwork: 0,
    community: 0,
    professional: 0,
    role_model: 0,
    supportive: 0,
    problem_solving: 0
  };
}

class AnotherChild extends Parent {
  formModel = {
    motive: 0,
    coop: 0,
    leadership: 0,
    teamwork: 0,
    community: 0,
    professional: 0,
    communication: 0,
    respect: 0,
    morale: 0,
    role_model: 0,
    supp_enviro: 0
  };
}

---

但是，您遇到的错误似乎是 webpack 特有的，我不知道是什么原因造成的。当我使用 tsc 编译时，使用或不使用 public abstract formModel: FormModel; 行发出的 JavaScript 没有区别。它只是类型信息，往往无法进入 JavaScript。您可能需要提供有关您的环境的更多信息，以便有人可以复制。

无论如何，您遇到的问题可能与抽象属性本身几乎没有关系，除了当您将该属性添加到父类时它会被暴露。也许this GitHub issue 是相关的？还是this SO question？我真的不知道，因为我没有任何 webpack 专业知识。

Answer 2

如果你只关心它的类型，你可以为它定义一个接口。

export interface FormModel {
 motive: number;
 coop: number;
 leadership: number;
 teamwork: number;
 community: number;
 professional: number;
 role_model: number;
 supportive: number;
 problem_solving: number;
}

然后在 child 中，您可以简单地声明这个 formModel 类型为在 parent 中定义的 FormModel（您还必须在 child component.ts 文件中导入此接口）。

import { FormModel } from 'app/<Interface's location>';

formModel: FormModel;

编辑

如果有帮助，您可以通过将 ? 添加到其声明中（如 motive?: number;）使它们成为可选项。因此，将此添加到您认为是可选的属性中。或者只是简单地声明你认为总是存在的属性（没有可选的），然后像这样添加一个动态属性。

export interface FormModel {
 motive: number;
 coop: number;
 leadership: number;
 teamwork: number;
 community: number;
 professional: number;
 role_model: number;
 supportive: number;
 problem_solving: number;
 [key: string]: any; // <-- leaving room for optional extra properties
}