Generische Arrays

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 60 von 73.

arrays und Generics arbeiten in TypeScript wunderbar zusammen. Als du zuvor etwas über typisierte arrays gelernt hast, hast du die Syntax T[] verwendet, um anzugeben, dass ein array nur Elemente eines bestimmten Typs enthalten kann. Generics bieten dir eine weitere Möglichkeit, dasselbe Konzept auszudrücken.

TypeScript bietet eine alternative Syntax für typisierte arrays im Format Array<T>:

// Diese beiden Deklarationen sind äquivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

Die Syntax Array<T> ist besonders nützlich, wenn du mit generischen Funktionen arbeitest, die auf Arrays operieren. Sie macht die generische Natur deines Codes expliziter und lesbarer, insbesondere wenn du Funktionen erstellst, die mit Arrays beliebigen Typs arbeiten können und dabei die Typsicherheit bewahren.

Aufgabe

Einfach

Erstelle eine generische Funktion namens getFirstElement, die ein Array eines beliebigen Typs entgegennimmt und das erste Element oder undefined zurückgibt, wenn das Array leer ist.

Die Funktion sollte:

Einen generischen Typparameter T verwenden
Einen Parameter namens arr vom Typ Array<T> akzeptieren
Das erste Element vom Typ T oder undefined zurückgeben
Eine explizite Rückgabetypannotation von T | undefined haben

Erstelle die folgenden Arrays mit der Syntax Array<T>:

stringArray vom Typ Array<string>, das ["apple", "banana", "cherry"] enthält
numberArray vom Typ Array<number>, das [10, 20, 30, 40] enthält
booleanArray vom Typ Array<boolean>, das [true, false, true] enthält
emptyStringArray vom Typ Array<string>, das leer ist

Teste deine Funktion und gib die folgenden Ausgaben aus:

Gib das Ergebnis des Aufrufs von getFirstElement mit stringArray aus
Gib das Ergebnis des Aufrufs von getFirstElement mit numberArray aus
Gib das Ergebnis des Aufrufs von getFirstElement mit booleanArray aus
Gib das Ergebnis des Aufrufs von getFirstElement mit emptyStringArray aus
Gib das Ergebnis des Aufrufs von getFirstElement mit einem neuen Array<string> aus, das ["single"] enthält

Probier es selbst

// TODO: Schreibe deinen Code hier
// Erstelle die generische Funktion getFirstElement

// Erstelle die erforderlichen Arrays mit Array&lt;T&gt;-Syntax

// Teste die Funktion und gib die Ergebnisse aus