如何在接口中定义angular的@Input装饰器？

Question

给出以下Angular组件:

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

现在我期待着实施NumberInterface.这就是我到目前为止所得到的:

export interface NumberInterface {
  number: number
}

基本上,我正在使用类型Function来定义Decorator.现在我想知道是否有更具体的方法来做到这一点.界面应强制组件实现角度的@Input装饰器.

Answer 1

Typescript中的接口严格不具有值，因为它们是仅用于类型检查且未编译为JS的实体。

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

Angular的@Input装饰器本身确实具有类型，但是由于该属性本身已经是类型，但是由装饰器给定的值，因此无法在低阶类中进行输入：

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组件。