打字稿：错误 TS2377：派生类的构造函数必须包含“超级”调用

Question

我正在尝试在我的代码中实现这个angular-upload-file-with-progress-bar 的Stackblitz 示例

export class UploadDocumentTemplateComponent extends FieldType {}

我有这条线是因为我收到了这个错误

错误 TS2377：派生类的构造函数必须包含“超级”调用。

如何解决这个问题？

Answer 1

只是在你需要的构造函数中

constructor()
{
   super()
}

Answer 2

为了提供更完整的答案或解释为什么要执行上述答案，该词super是对超类或父类的引用，其UploadDocumentTemplateComponent为FieldType。

这里不会显示是否调用了子类的构造函数，但无论何时，都需要调用父类的构造函数方法。

你这样做：

export class UploadDocumentTemplateComponent extends FieldType {
  constructor() {
    super();
  }
}

再次为了更多的完成。即使您传入，super();您仍然可能会看到错误，特别是如果您有以下情况：

class FieldType {
  constructor(public color: string) {}
}

class UploadDocumentTemplateComponent extends FieldType {
  constructor() {
    super():
  }
}

此时您可以像这样解决该问题：

class FieldType {
  constructor(public color: string) {}
}

class UploadDocumentTemplateComponent extends FieldType {
  constructor() {
    super('red'):
  }
}

但很可能您不想这样做，很可能我们希望在您创建它时color仍然作为您的参数。UploadDocumentTemplateComponent

UploadDocumentTemplateComponent所以也许我们可以像这样在构造函数中接受一个参数：

class FieldType {
  constructor(public color: string) {}
}

class UploadDocumentTemplateComponent extends FieldType {
  constructor(color: string) {
    super('red'):
  }
}

现在另一个需要注意的细节是访问修饰符，所以请注意，在这个示例中我没有添加修饰符public。我没有添加public关键字 on ，因为我们不想在UploadDocumentTemplateComponentof中重新分配或创建新字段color，该字段color属于FieldType我的示例。

这就是为什么我没有加上 的修饰符public。

现在我们在这里用超类调用父类构造函数，我们不会传递硬编码的红色，而是可以传递颜色，如下所示：

class FieldType {
  constructor(public color: string) {}
}

class UploadDocumentTemplateComponent extends FieldType {
  constructor(color: string) {
    super(color):
  }
}