Дан следующий компонент Angular:

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

Теперь я с нетерпением жду возможности реализовать NumberInterface. Вот что у меня есть на данный момент:

export interface NumberInterface {
  number: number
}

По сути, я использую тип Function для определения декоратора. Теперь мне интересно, есть ли более конкретный способ сделать это. Интерфейс должен заставить компонент реализовать декоратор angular @Input.

8
Orlandster 20 Апр 2018 в 21:58

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.

16
joh04667 17 Апр 2019 в 18:51