[英]How to define angular's @Input decorator in an interface?
给出以下Angular组件:
export class NumberComponent implements NumberInterface {
@Input() number;
constructor() { }
}
现在我期待实现NumberInterface
。 这就是我到目前为止所得到的:
export interface NumberInterface {
number: number
}
基本上,我使用类型Function
来定义Decorator。 现在我想知道是否有更具体的方法来做到这一点。 界面应该强制组件实现angular的@Input
装饰器。
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组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.