TypeScript Academy · Lektion

Array- und Tupel-Destructuring

Destrukturieren Sie Arrays und Tupel mit den korrekten Elementtypen.

Array- und Tupel-Destructuring ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Positionsbasierte Destrukturierung

Bei der Array-Destrukturierung werden Variablen anhand ihrer Position statt ihres Namens gebunden. Bei Tupeln hat jede Position einen bestimmten Typ, wodurch eine präzise Extraktion in fester Reihenfolge möglich ist.

Grundlagen der Array-Destrukturierung

Eckige Klammern auf der linken Seite extrahieren Elemente anhand ihrer Indexreihenfolge. Bei einem gewöhnlichen Array teilen sich alle Bindungen den Elementtyp des Arrays.

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

Ein Tupelmuster annotieren

Annotieren Sie das Muster, indem Sie der Bindung danach einen Tupeltyp geben. Jede Position erhält ihren eigenen Typ — hier zuerst eine Zahl und dann eine Zeichenkette.

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

Typen folgen der Position

Bei einem Tupel ist der Typ an jedem Index festgelegt. Die erste Bindung ist eine Zahl, die zweite eine Zeichenkette — würden Sie die Werte vertauschen, wäre das ein Typfehler.

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

Elemente mit Kommas überspringen

Lassen Sie eine Position mit einem leeren Kommafeld aus, wenn Sie sie nicht benötigen. Der Typ des übersprungenen Elements wird einfach ignoriert.

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

Destrukturierung mit Rest

Ein Rest-Element sammelt die übrigen Elemente in einem Array. Bei einem Tupel entspricht sein Typ den verbleibenden Positionen.

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

Resttyp aus einem Tupel

Wenn Sie ein Tupel mit einem Rest-Element destrukturieren, leitet TypeScript für die Restvariable ein Tupel aus den verbleibenden Elementen ab und erhält dabei deren Typen.

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

Variablen vertauschen

Die Array-Destrukturierung ermöglicht einen praktischen Trick: Sie können zwei Werte ohne temporäre Variable vertauschen. Damit der Tausch typgeprüft werden kann, müssen die Typen kompatibel sein.

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

Destrukturierung bei Funktionsrückgaben

Funktionen, die Tupel zurückgeben, lassen sich hervorragend mit Destrukturierung kombinieren — das React-Muster useState ist genau ein solches Beispiel.

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

Standardwerte in Array-Mustern

Geben Sie für eine Position, die undefined sein kann, einen Standardwert an. Der Standardwert wird nur verwendet, wenn das Element fehlt oder undefined ist.

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

Verschachtelte Array-Destrukturierung

Sie können Arrays in einer einzigen Anweisung auch innerhalb anderer Arrays destrukturieren. Die Typen werden entsprechend verschachtelt, aber behalten Sie bei tiefen Strukturen die Lesbarkeit im Blick.

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

Kurzer Test

Testen Sie Ihr Verständnis der Destrukturierung von Arrays und Tupeln.

Zusammenfassung

Bei der Array-Destrukturierung werden Bindungen anhand ihrer Position erstellt. Annotieren Sie das Muster danach mit einem Tupeltyp, damit jeder Index seinen eigenen Typ erhält. Überspringen Sie Elemente mit leeren Kommafeldern, sammeln Sie die übrigen Elemente mit einem Rest-Element — dessen Typ bleibt ein Tupel der verbleibenden Positionen — und geben Sie für möglicherweise fehlende Positionen Standardwerte an. Tupel-Rückgaben und Destrukturierung ermöglichen Muster wie useState.

Häufig gestellte Fragen

Ist die Lektion „Array- und Tupel-Destructuring“ kostenlos?

Ja — der vollständige Text von „Array- und Tupel-Destructuring“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Array- und Tupel-Destructuring“?

Destrukturieren Sie Arrays und Tupel mit den korrekten Elementtypen. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Array- und Tupel-Destructuring“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy