Arrays en tupels

In JavaScript kunnen arrays elk type elementen bevatten en dynamisch groeien of krimpen. TypeScript voegt statische typecontrole toe om ervoor te zorgen dat collecties homogeen blijven of een vaste typestructuur respecteren.

Arrays (homogene verzamelingen)

In TypeScript zijn er twee gelijkwaardige manieren om het type te definiëren van een array die elementen van hetzelfde type bevat:

1. Gebruik het elementtype gevolgd door vierkante haakjes ([]):

   TS

   Kopieer

   const numbers: number[] = [1, 2, 3];
   const strings: string[] = ['a', 'b', 'c'];

2. Gebruik het algemene type Array<T>:

   TS

   Kopieer

   const numbers: Array<number> = [1, 2, 3];

Beide syntaxis zijn volledig geldig, maar de eerste (type[]) is de conventionele en meest voorkomende stijl. Als u een ongeldige waarde probeert in te voegen (bijvoorbeeld numbers.push("hello") in een number[] array), genereert TypeScript een compileerfout.

Tupels (matrices met vaste lengte)

Een tuple is een speciaal type array met een vast aantal elementen, waarbij elk element een vooraf gedefinieerd specifiek type heeft op basis van zijn positie.

Om bijvoorbeeld een HTTP-antwoord op te slaan dat bestaat uit een statuscode (nummer) en een bericht (tekenreeks):

const response: [number, string] = [200, 'OK'];

In dit geval:

• Het eerste element (response[0]) moet een number zijn.
• Het tweede element (response[1]) moet een string zijn.
• De array moet worden geïnitialiseerd met precies 2 elementen.

Alleen-lezen tupels (readonly)

Een belangrijk detail over tupels in TypeScript is dat het tijdens runtime normale JavaScript-arrays zijn. Dit betekent dat mutatieve methoden zoals .push() of .pop() technisch beschikbaar zijn en de lengte van de tupel kunnen veranderen, waarbij typecontroles gedeeltelijk worden omzeild.

Om dit gedrag te voorkomen en echte onveranderlijkheid af te dwingen, kunnen we de readonly modifier gebruiken:

const point: readonly [number, number] = [10, 20];
// point.push(30); // Compile-time error!

Probeer het zelf

Oefening 1: Reeks getallen

Oefening 2: 3D-coördinatentupel

Oefening 3: Locatie-info Tupel

Oefening 4: Tupel voor logboekinvoer