Array- en tuple-destructurering
Destructureer arrays en tuples met de juiste elementtypen
Array- en tuple-destructurering is een gratis TypeScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.
Positioneel destructureren
Bij arraydestructurering worden variabelen gekoppeld op basis van hun positie in plaats van hun naam. Bij tuples heeft elke positie een specifiek type, zodat je waarden nauwkeurig en in de juiste volgorde kunt uitpakken.
Elementaire arraydestructurering
Met vierkante haken aan de linkerkant pak je elementen uit op basis van hun indexvolgorde. Bij een gewone array heeft elke binding hetzelfde elementtype als de array.
const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30Een tuplepatroon annoteren
Annoteer een patroon door de binding erna een tupletype te geven. Elke positie krijgt een eigen type — hier eerst een getal en daarna een tekenreeks.
const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 twoTypes volgen de positie
In een tuple ligt het type op elke index vast. De eerste binding is een getal en de tweede een tekenreeks — als je de waarden omwisselt, ontstaat er een typefout.
const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)Elementen overslaan met komma's
Laat een positie open met een lege plek tussen komma's als je die positie niet nodig hebt. Het type van het overgeslagen element wordt simpelweg genegeerd.
const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0Destructureren met rest
Een restelement verzamelt de resterende items in een array. Bij een tuple weerspiegelt het type de overgebleven posities.
const [head, ...tail] = [1, 2, 3, 4]
console.log(head) // 1
console.log(tail.length) // 3Resttype uit een tuple
Als je een tuple met een restwaarde destructureert, leidt TypeScript de restvariabele af als een tuple van de resterende elementen, waarbij hun types behouden blijven.
const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])Variabelen omwisselen
Een handige mogelijkheid van arraydestructurering: twee waarden omwisselen zonder tijdelijke variabele. De types moeten compatibel zijn om de omwisseling door de typecontrole te laten komen.
let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1Destructureren in functieretourwaarden
Functies die tuples retourneren, werken bijzonder goed met destructurering — het React-patroon useState is precies zo'n geval.
function useCounter(): [number, () => number] {
let n = 0
return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())Standaardwaarden in arraypatronen
Geef een standaardwaarde op voor een positie die mogelijk undefined is. De standaardwaarde wordt alleen gebruikt als het element ontbreekt of undefined is.
const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0Geneste arraydestructurering
Je kunt arrays in arrays destructureren in één instructie. De types worden overeenkomstig genest, maar houd bij diepe structuren rekening met de leesbaarheid.
const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4Korte controle
Controleer je begrip van array- en tupledestructurering.
Samenvatting
Bij arraydestructurering worden bindings gekoppeld op basis van hun positie. Annoteer met een tupletype na het patroon, zodat elke index een eigen type krijgt. Sla elementen over met lege plekken tussen komma's, verzamel de rest met een restelement — dat een tuple van de overgebleven posities blijft — en geef standaardwaarden op voor posities die kunnen ontbreken. Tuple-retourwaarden in combinatie met destructurering maken patronen zoals useState mogelijk.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 101
- Lessen
- 352
Veelgestelde vragen
Is de les “Array- en tuple-destructurering” gratis?
Ja — de volledige tekst van “Array- en tuple-destructurering” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Array- en tuple-destructurering”?
Destructureer arrays en tuples met de juiste elementtypen Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met TypeScript Academy te beginnen?
Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Array- en tuple-destructurering”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?
Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Typen voor objectdestructurering
- Array- en tuple-destructurering
- Standaardwaarden bij destructurering
- Geneste destructureringspatronen