Hoe werkt de type-annotatie van arrays in TypeScript, hoe declareer je arrays met elementen van verschillende types en welke manieren zijn er om deze te beschrijven met behulp van tuples? Geef voorbeelden en leg mogelijke fouten uit die verband houden met het werken met dergelijke structuren.

Antwoord.

In TypeScript worden arrays op twee belangrijke manieren beschreven: type[] en Array<type>. Voor arrays met elementen van verschillende types worden unietypes (union types) of tuples gebruikt, die een vaste set van elementen van verschillende types en hoeveelheden beschrijven.

Declaraties van arrays:

let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ['a', 'b', 'c'];

Array met elementen van verschillende types:

let mixed: (string | number)[] = [1, 'a', 2];

Tuples:

let tuple: [string, number, boolean] = ['hello', 42, true];

Met tuples is het handiger om te werken als er een vaste structuur wordt verwacht (bijvoorbeeld meerdere waarden van verschillende types tegelijk uit een functie retourneren), terwijl arrays handiger zijn als het aantal en type van elementen door elkaar kan worden gegooid of van tevoren onbekend is.

Misleidende vraag.

Is het mogelijk om na de definitie van een tuple met lengte N elementen toe te voegen met behulp van push? Hoe beïnvloedt dit de type-annotatie?

Antwoord: Ja, je kunt elementen aan een tuple toevoegen — de compiler staat dit toe, hoewel dit de aanname van de beperking van de tuplelengte schendt. De types van nieuwe elementen worden omgezet naar de unie van alle mogelijke types van de tuple-elementen:

let tuple: [number, string] = [42, 'foo'];
tuple.push(true); // OK! tuple nu: [number, string, boolean], maar het type is niet bijgewerkt, en er is geen fout!
console.log(tuple); // [42, 'foo', true]

Daarom moet je het werken met tuples en hun mutability handmatig controleren of ze readonly maken.

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

---

Verhaal

Een ontwikkelaar beschreef een functie die een tuple [number, string] retourneert, maar begon vervolgens elementen aan het resultaat toe te voegen via push. Dit leidde tot desynchronisatie van types: de volgende code verwachte precies twee elementen met specifieke types, maar ontving een array van variabele lengte, wat leidde tot runtime-fouten bij het unpacken van waarden en het lezen van niet-bestaande indexen.

---

Verhaal

Voor het opslaan van een array van waarden van verschillende types werd een array any[] gebruikt, denkend dat dit een universele oplossing was. Als resultaat stopte TypeScript met het controleren van de typecorrectheid, en de logica van de applicatie begon "te falen" vanwege verkeerde typeconversies die geen compilatiefouten veroorzaakten.

---

Verhaal

In het project werd de array ofwel via type[], of via Array<type> beschreven — maar op sommige plaatsen werd de declaratie let arr: any[] toegestaan (om "met alles te werken"). Hierdoor ontstonden ongecontroleerde conversies, accepteerde de functie elke array, wat leidde tot runtime-fouten bij het proberen ongeldige methoden voor elementen van verschillende types aan te roepen.