typescript - Typinferens och arv i Angular-mallar

Om jag har en tabellkomponent

TableComponent<T extends object, K extends keyof T> {
  ...

  Input()
  data!: T[];

  ContentChildren(ColumnComponent<K>)
  columns!: QueryList<ColumnComponent<K>>;

  ...
}

och en kolumnkomponent

ColumnComponent<K> {
  ...

  Input()
  property!: K;

  ...
}

och jag använder det som

<app-table [data]="someArray">
  <!-- Can I get a warning here to say some of the child components are not of type K -->
  <app-column property="validProperty" />
  <app-column property="anotherValidProperty" />
  <app-column property="invalidProperty" />
  <app-column [property]="'anotherInvalidProperty'" />
  <!-- I would like a warning here to show that some of the properties are not valid -->
<app-table>

Är det möjligt att få kolumnkomponenterna att ärva typen av nycklar från föräldratabellkomponenten så att de är starkt typade mot egenskaperna i dataarrayen. Eller kanske låta tabellen visa en varning att några av barnen inte är av typen K.

Här är en StackBlitz https://stackblitz.com/edit/stackblitz-starters-q3pgtp?file=src%2Fmain.html

Svar #1

Jag tror att det enda sättet du kan uppnå detta är om du också skickar data från din tabell till varje ColumnComponent, och låter den också ta de två generiska typerna <T extends object, K extends keyof T> som i föräldern TableComponent. På detta sätt kommer TypeScript att vara medveten om att K-typen måste vara en keyof T.

Bifogat är din Stackblitz med de relevanta tilläggen, du kommer att se att de önskade varningarna uppstod.

Självklart, om du inte har något att göra med data-egenskapen i ColumnComponent - överväg om det är värt att lägga till den där bara för typbehandling. Men jag tror inte att du kan uppnå ditt mål på ett annat sätt.