如何在界面中定义 Angular 的 @Input 装饰器？答案

【问题标题】：How to define angular's @Input decorator in an interface?如何在界面中定义 Angular 的 @Input 装饰器？
【发布时间】：2018-10-01 13:16:04
【问题描述】：

给出以下 Angular 组件：

export class NumberComponent implements NumberInterface {
  @Input() number;
  constructor() { }
}

现在我期待着实现NumberInterface。这就是我到目前为止所得到的：

export interface NumberInterface {
  number: number
}

基本上，我使用Function 类型来定义装饰器。现在我想知道是否有更具体的方法来做到这一点。接口应该强制组件实现 Angular 的 @Input 装饰器。

【问题讨论】：

NumberComponent implements NumberInterface 在 Angular 中不是一个东西。尽管有这个名字，它并不是一个类接口，，而只是一个类型的集合。

标签： angular typescript decorator

【解决方案1】：

Typescript 中的接口严格来说是没有价值的，因为它们是只存在于类型检查而不编译成 JS 的实体。

您不能在接口中定义装饰器，因为装饰器具有值。它是一个接受参数并为类属性赋值的函数，而不是类型。

Angular 的 @Input 装饰器本身确实有类型，但不可能在低阶类中键入它们，因为该属性本身已经是一个类型，但由装饰器赋予 value：

export interface ITest {

  prop: Input;
  prop2: InputDecorator;

}

export class Test implements ITest {

  @Input('thing') prop: string;
  @Input('thing2') prop2: string;

}

// typeerror: Test does not correctly implement ITest

然而，组件类可以在 Angular 中派生，并且父类的装饰器将由子类继承。如果您想在代码中实现更多的多态方法，这将非常有用：

export class NumberBase {

  @Input('number') number: number;

}

export class NumberComponent extends NumberBase {


  ngOnInit() {
    console.log(this.number); // works!
  }

}

组件可以扩展普通的 TS 类或完全修饰的 Angular 组件。

【讨论】：

谢谢，extending 带来了我想要的行为。如此精彩的答案！
我认为 super() 需要在组件的 constructor() 中调用，因为它正在扩展一个类
是的，如果你有构造函数，super 调用需要是构造函数主体的第一行。 TS 编译器会让你很快知道 :)