EMZETT.
Login

Emzett Wiki

TypeScript: Arrays, Tupel und Enums

Properties1
tagsprogrammiersprachen, typescript

4 Min. Lesezeit

Kurz: zahlen.sort((a, b) => a - b); console.log(zahlen, namen.map((n) => n.toUpperCase()), gemischt.length, matrix[1][0]); `output [ 1, 2, 3 ] [ 'MIA', 'TOM' ] 3 3

Teil des Kurses TypeScript

Kapitel 6 von 15 im Kurs TypeScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Arrays

const zahlen: number[] = [3, 1, 2];
const namen: Array<string> = ["Mia", "Tom"];
const gemischt: (string | number)[] = [1, "zwei", 3];
const matrix: number[][] = [[1, 2], [3, 4]];
 
zahlen.sort((a, b) => a - b);
console.log(zahlen, namen.map((n) => n.toUpperCase()), gemischt.length, matrix[1][0]);

Ausgabe:

[ 1, 2, 3 ] [ 'MIA', 'TOM' ] 3 3

Methoden wie map und filter übernehmen den Elementtyp:

const personen = [{ name: "Mia", alter: 17 }, { name: "Tom", alter: 19 }];
const volljaehrig = personen.filter((p) => p.alter >= 18).map((p) => p.name);
console.log(volljaehrig);

Ausgabe:

[ 'Tom' ]

Mit readonly schützt du ein Array vor Änderungen:

const fest: readonly number[] = [1, 2, 3];
console.log(fest.map((x) => x * 2));

Ausgabe:

[ 2, 4, 6 ]
const fest: readonly number[] = [1, 2, 3];
fest.push(4);

Fehlermeldung:

error TS2339: Property 'push' does not exist on type 'readonly number[]'.

Tupel

Ein Tupel ist ein Array mit fester Länge und festen Typen pro Position:

const punkt: [number, number] = [3, 4];
const eintrag: [string, number, boolean] = ["Mia", 17, true];
const [x, y] = punkt;                       // Destructuring
console.log(x + y, eintrag[0], eintrag[2]);
 
const mitName: [name: string, alter: number] = ["Tom", 19];   // benannte Elemente
console.log(mitName);
 
function minMax(z: number[]): [min: number, max: number] {
  return [Math.min(...z), Math.max(...z)];
}
const [kleinste, groesste] = minMax([4, 9, 2]);
console.log(kleinste, groesste);

Ausgabe:

7 Mia true
[ 'Tom', 19 ]
2 9

Tupel sind ideal, wenn eine Funktion mehrere Werte zurückgibt (wie useState in React).

Enums

Ein enum gibt Konstanten Namen:

enum Farbe { Rot, Gruen, Blau }
enum Status { Offen = "OFFEN", Fertig = "FERTIG" }
 
console.log(Farbe.Gruen, Farbe[2], Status.Offen);

Enums erzeugen echten JavaScript-Code. Viele Teams ziehen deshalb Union-Literaltypen oder as const-Objekte vor. Sie sind schlanker, funktionieren mit allen Werkzeugen (auch dem direkten Ausführen von .ts-Dateien) und verhalten sich vorhersagbar:

const Status = {
  Offen: "OFFEN",
  InArbeit: "IN_ARBEIT",
  Fertig: "FERTIG",
} as const;
 
type Status = typeof Status[keyof typeof Status];    // "OFFEN" | "IN_ARBEIT" | "FERTIG"
 
function beschreibe(s: Status): string {
  return s === Status.Fertig ? "erledigt" : "noch zu tun";
}
console.log(Status.Offen, beschreibe("FERTIG"), beschreibe(Status.Offen));
console.log(Object.values(Status));

Ausgabe:

OFFEN erledigt noch zu tun
[ 'OFFEN', 'IN_ARBEIT', 'FERTIG' ]

as const macht aus einem Objekt oder Array einen vollständig schreibgeschützten Typ mit Literalen:

const farben = ["rot", "gruen", "blau"] as const;
type Farbe = typeof farben[number];                  // "rot" | "gruen" | "blau"
const f: Farbe = "gruen";
console.log(f, farben.length);

Ausgabe:

gruen 3

Über Arrays iterieren, mit Typen

const preise: Record<string, number> = { apfel: 1.2, birne: 1.5 };
for (const [name, preis] of Object.entries(preise)) {
  console.log(name.padEnd(6), preis.toFixed(2));
}
const lookup = new Map<string, number>([["a", 1], ["b", 2]]);
const menge = new Set<number>([1, 2, 2, 3]);
console.log(lookup.get("a"), menge.size);

Ausgabe:

apfel  1.20
birne  1.50
1 3

noUncheckedIndexedAccess

Beim Zugriff liste[5] nimmt TypeScript an, dass es das Element gibt. Mit der Option noUncheckedIndexedAccess in der tsconfig.json wird das Ergebnis zu T | undefined, und du musst es prüfen: sicherer, aber etwas umständlicher.

Merke

  • Arrays: T[] oder Array<T>; readonly T[] ist unveränderlich
  • Tupel: feste Länge und Typen pro Stelle, gut für mehrere Rückgabewerte
  • Statt enum oft besser: as const-Objekte oder Union-Literaltypen
  • typeof x[number] und keyof typeof leiten Typen aus Werten ab
  • Map<K, V> und Set<T> sind generisch typisiert

Übungsaufgabe

Definiere ein as const-Objekt mit Wochentagen, leite daraus den Typ Wochentag ab und schreibe eine Funktion, die für jeden Wochentag angibt, ob Wochenende ist.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Unions, Literaltypen und Narrowing

Weiter: Klassen in TypeScript

Alle Kapitel: TypeScript im Überblick

Graphansicht

Backlinks