typescript - Hvordan definere Angulars @Input-dekoratør i et grensesnitt?

Gitt er følgende Angular-komponent:

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

Nå ser jeg frem til å implementere NumberInterface. Det er hva jeg har så langt:

export interface NumberInterface {
  number: number
}

Basert på, bruker jeg typen Function for å definere dekoratoren. Nå lurer jeg på om det finnes en mer spesifikk måte å gjøre dette på. Grensesnittet bør tvinge komponenten til å implementere Angulars @Input-dekorator.

Svar #1

Grensesnitt i Typescript har strengt tatt ingen verdi, da de er enheter som kun eksisterer for typkontroll og ikke blir kompilert til JS.

Du kan ikke definere en dekoratør i et grensesnitt fordi dekoratøren har verdi. Det er en funksjon som tar et argument og gir verdi til klasseegenskapen, og ikke en type.

Angulars @Input-dekoratører har selv en typning, men det er umulig å typisere dem i en underordnet klasse siden den egenskapen allerede er en type, men gitt value av dekoratøren:

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

Imidlertid kan komponentklasser utledes fra i Angular, og foreldresklassens dekoratører vil bli arvet av barnet. Dette er nyttig hvis du vil implementere sterk typisering sammen med en mer polymorf tilnærming til koden din:

export class NumberBase {

  @Input('number') number: number;

}

export class NumberComponent extends NumberBase {


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

}

Komponenter kan utvide enten vanlige TS-klasser eller fullstendig dekorerte Angular-komponenter.

Relaterte artikler