How to define angular's @Input decorator in an interface?

Question

Given is the following Angular component:

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

Now I'm looking forward to implement the NumberInterface. That's what I've got so far:

export interface NumberInterface {
  number: number
}

Basically, I'm using the type Function to define the Decorator. Now I'm wondering if there is a more specific way to do this. The interface should force the component to implement angular's @Input decorator.

NumberComponent implements NumberInterface isn't a thing in Angular. Despite the name, it's not a class interface, but simply a collection of types. — msanford
– msanford, Commented Apr 20, 2018 at 19:39

joh04667 · Accepted Answer · 2019-04-17 18:51:52Z

26

Interfaces in Typescript strictly do not have value, as they are entities that only exist for type-checking and are not compiled into JS.

You can't define a decorator in an interface because the decorator has value. It's a function that takes an argument and gives value to the class property, and not a type.

Angular's @Input decorators themselves do have a typing, but it's impossible to type them in a lower-order class since that property is itself already a type, but given value by the decorator:

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

However, component classes can be derived from in Angular, and the parent class' decorators will be inherited by the child. This is useful if you want to implement strong typing alongside a more polymorphic approach to your code:

export class NumberBase {

  @Input('number') number: number;

}

export class NumberComponent extends NumberBase {


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

}

Components can extend either plain TS classes or fully decorated Angular components.

edited Apr 17, 2019 at 18:51

answered Apr 20, 2018 at 19:33

joh04667

7,48730 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Orlandster Over a year ago

Thanks, extending brings exactly the behavior I want. Such a brilliant answer!

user3777933 Over a year ago

I believe super() needs to be called in the component's constructor() then since it's extending a class

joh04667 Over a year ago

yup, if you have a constructor, the super call needs to be the first line of the constructor body. The TS compiler will let you know that pretty quickly :)

Collectives™ on Stack Overflow

How to define angular's @Input decorator in an interface?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related