Hoe beschrijf je types voor complexe datastructuren (bijv. geneste objecten, arrays met verschillende types) in TypeScript? Welke benaderingen zijn er en welke valkuilen komen vaak voor? Geef praktische voorbeelden.

Antwoord.

Voor het beschrijven van complexe datastructuren in TypeScript worden interfaces (interface) en type-aliases (type) gebruikt. Je kunt ze combineren met objecten, arrays en geneste types voor een strikte type-check van complexe collecties.

Voor een genest object:

interface Address {
  city: string;
  zip: number;
}

interface UserProfile {
  name: string;
  age: number;
  address: Address;
}

Voor een array met verschillende types:

// Tuple
let tuple: [string, number] = ['John', 30];

// Arrays met union-types
let arr: (string | number)[] = [1, 'a', 2, 'b'];

// Array van objecten
let users: UserProfile[] = [ {...}, {...} ];

Wanneer structuren complex zijn en er optionele velden zijn, gebruik je ?, combineer je met types zoals Partial, Record, Mapped Types, of recursieve types voor geneste bomen.

Vragen met een draai.

Vraag: Kun je een interface gebruiken om een array met verschillende typen elementen (bijv. [string, number, boolean]) te beschrijven?

Antwoord: Nee. Voor dit geval is het beter om tuples te gebruiken — interfaces zijn niet geschikt voor vaste posities en types. Tuples maken het mogelijk om de types per positie strikt te definiëren.

type MyTuple = [string, number, boolean];
let foo: MyTuple = ['ok', 12, false];

Voorbeelden van echte fouten door gebrek aan kennis van de subtiliteiten van het onderwerp.

---

Verhaal

In een project werd een complexe structuur verkeerd beschreven: voor een array met verschillende types werd any[] gebruikt in plaats van een correcte tuple of union-type. Hierdoor was er in een van de elementen een waarde van het verkeerde type, wat leidde tot een fout in de businesslogica (rekenkundige bewerking met een string).

---

Verhaal

In de datastructuur waren diep geneste objecten zonder gebruik van recursieve types of Partial gedeclareerd. Pogingen om een nieuw subboompje aan een knooppunt in de boom toe te voegen resulteerden in een compilerfout, en ontwikkelaars omzeilden dit door downcast naar any, wat vervolgens runtime-bugs in productie veroorzaakte.

---

Verhaal

Een object met de beschrijving van een gebruikersprofiel was gedeeltelijk optioneel, maar de ontwikkelaar had ? niet gebruikt. Bij het ophalen van gegevens van de server gaf TypeScript geen foutmelding, en de applicatie kraste toen deze probeerde toegang te krijgen tot velden die niet in het object bestonden.