TypeScript Academy · leksjon

Destrukturering av arrayer og tupler

Destrukturer arrayer og tupler med riktige elementtyper.

Leksjon 2 av 413 trinn

Destrukturering av arrayer og tupler er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Posisjonsbasert destrukturering

Array-destrukturering binder variabler etter posisjon i stedet for etter navn. Med tupler har hver posisjon en bestemt type, slik at du får presis uttrekking i riktig rekkefølge.

Grunnleggende array-destrukturering

Hakeparenteser på venstresiden henter ut elementer etter indeksrekkefølge. For en vanlig array får alle bindingene arrayens elementtype.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Typeannotere et tuple-mønster

Annoter ved å gi bindingen en tuple-type etter mønsteret. Hver posisjon får sin egen type – her først et tall og deretter en streng.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Typene følger posisjonen

I en tuple er typen på hver indeks fast. Den første bindingen er et tall, den andre en streng – å bytte om verdiene ville være en typefeil.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Hoppe over elementer med komma

La en tom kommplass stå igjen for å hoppe over en posisjon du ikke trenger. Typen til det overhoppede elementet ignoreres ganske enkelt.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Destrukturere med rest

Et rest-element samler de gjenværende elementene i en array. For en tuple gjenspeiler typen de gjenværende posisjonene.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Resttype fra en tuple

Når du destrukturerer en tuple med rest, utleder TypeScript restvariabelen som en tuple med de gjenværende elementene, samtidig som typene bevares.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Bytte variabler

Et praktisk triks som array-destrukturering muliggjør: Du kan bytte to verdier uten en midlertidig variabel. Typene må være kompatible for at byttet skal bestå typekontrollen.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Destrukturering av funksjoners returverdier

Funksjoner som returnerer tupler, passer utmerket sammen med destrukturering – React-mønsteret useState er nettopp et slikt eksempel.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Standardverdier i array-mønstre

Angi en standardverdi for en posisjon som kan være undefined. Standardverdien brukes bare når elementet mangler eller er undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Nestet array-destrukturering

Du kan destrukturere arrayer inni arrayer i én setning. Typene nøstes tilsvarende, men tenk på lesbarheten når strukturen blir dyp.

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 4

Rask kontroll

Test forståelsen din av array- og tuple-destrukturering.

Besvar den i den interaktive leksjonen

Oppsummering

Array-destrukturering binder etter posisjon. Annoter med en tuple-type etter mønsteret, slik at hver indeks får sin egen type. Hopp over elementer med tomme kommplasser, samle resten med et rest-element (som fortsatt er en tuple med de gjenværende posisjonene), og angi standardverdier for posisjoner som kan mangle. Tuple-returverdier kombinert med destrukturering muliggjør mønstre som useState.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Destrukturering av arrayer og tupler» gratis?

Ja – hele teksten i «Destrukturering av arrayer og tupler» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Destrukturering av arrayer og tupler»?

Destrukturer arrayer og tupler med riktige elementtyper. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Destrukturering av arrayer og tupler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til TypeScript Academy