Arrays und Objekte in TypeScript typisieren

Einfache primitive Typen wie string und number sind der Einstieg. In der Praxis bestehen Daten aber fast immer aus Objekten und Arrays. TypeScript bietet präzise Werkzeuge, um diese Strukturen zu beschreiben.

Arrays typisieren

Die gebräuchlichste Schreibweise für Arrays verwendet eckige Klammern nach dem Elementtyp:

const namen: string[] = ["Anna", "Bernd", "Carla"];
const preise: number[] = [9.99, 14.99, 4.99];
const aktiv: boolean[] = [true, false, true];

Die alternative Generic-Schreibweise ist semantisch identisch:

const namen: Array<string> = ["Anna", "Bernd", "Carla"];
const gemischt: Array<string | number> = ["Hallo", 42, "Welt"];

TypeScript prüft Arrayzugriffe und Methoden auf Typkorrektheit:

const zahlen: number[] = [10, 20, 30];

const summe = zahlen.reduce((acc, n) => acc + n, 0); // Typ: number
const gefiltert = zahlen.filter((n) => n > 15);       // Typ: number[]
const verdoppelt = zahlen.map((n) => n * 2);          // Typ: number[]

Mehrdimensionale Arrays

Verschachtelte Arrays werden durch mehrfache Klammernotation beschrieben:

const matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

const zelle: number = matrix[1][2]; // Typ: number, Wert: 6

Tupel: Arrays mit fester Struktur

Ein Tupel ist ein Array mit bekannter Länge und festgelegten Typen je Position. Das ist nützlich für Koordinaten, Schlüssel-Wert-Paare oder Funktionen, die mehrere Werte zurückgeben:

const koordinate: [number, number] = [52.52, 13.405];
const stadtEintrag: [string, number] = ["Berlin", 3645000];

const breitengrad: number = koordinate[0];
const stadtname: string = stadtEintrag[0];

Named Tuple Elements verbessern die Lesbarkeit:

type GeoPosition = [breitengrad: number, längengrad: number];

const berlin: GeoPosition = [52.52, 13.405];

Tupel eignen sich auch als Rückgabewert, wenn mehrere zusammengehörige Werte zurückgegeben werden sollen:

function teile(text: string, trennzeichen: string): [string[], number] {
  const teile = text.split(trennzeichen);
  return [teile, teile.length];
}

const [wörter, anzahl] = teile("Hallo Welt Foo", " ");

Objekte typisieren

Objekte können direkt inline typisiert werden:

const benutzer: { name: string; alter: number; email: string } = {
  name: "Anna",
  alter: 30,
  email: "anna@beispiel.de",
};

Für wiederverwendbare Strukturen empfehlen sich Type Aliases oder Interfaces:

type Adresse = {
  strasse: string;
  hausnummer: string;
  plz: string;
  ort: string;
  land?: string; // Optional
};

interface Benutzer {
  id: number;
  name: string;
  email: string;
  adresse: Adresse;
}

Verschachtelte Objekte

Objekte können beliebig tief verschachtelt werden:

interface Bestellung {
  id: string;
  datum: Date;
  kunde: {
    id: number;
    name: string;
  };
  positionen: Array<{
    artikelId: string;
    bezeichnung: string;
    menge: number;
    einzelpreis: number;
  }>;
}

TypeScript prüft beim Zugriff auf jeder Ebene den korrekten Typ:

function berechneGesamtpreis(bestellung: Bestellung): number {
  return bestellung.positionen.reduce(
    (summe, pos) => summe + pos.menge * pos.einzelpreis,
    0
  );
}

Index-Signaturen für Objekte mit beliebigen Schlüsseln

Wenn die Schlüssel eines Objekts nicht im Voraus bekannt sind, kommen Index-Signaturen zum Einsatz:

type Wörterbuch = {
  [schlüssel: string]: string;
};

const übersetzungen: Wörterbuch = {
  hallo: "hello",
  welt: "world",
  danke: "thank you",
};

// Oder mit dem Record-Hilfswerkzeug:
const farben: Record<string, string> = {
  rot: "#FF0000",
  grün: "#00FF00",
  blau: "#0000FF",
};

Readonly: Unveränderliche Strukturen

TypeScript kann Arrays und Objekte als unveränderlich markieren:

const festeListe: readonly string[] = ["Montag", "Dienstag", "Mittwoch"];
// festeListe.push("Donnerstag"); // Compilerfehler: push existiert nicht auf readonly

const config: Readonly<{ host: string; port: number }> = {
  host: "localhost",
  port: 3000,
};
// config.port = 8080; // Compilerfehler: Feld ist readonly

Für tiefe Unveränderlichkeit (Readonly auch für verschachtelte Objekte) gibt es externe Bibliotheken oder das Utility-Type DeepReadonly.

Utility Types für Objekte

TypeScript liefert nützliche Hilfswerkzeuge, um bestehende Typen abzuwandeln:

interface Produkt {
  id: number;
  name: string;
  preis: number;
  beschreibung: string;
}

// Alle Felder optional machen:
type PartiellesProdukt = Partial<Produkt>;

// Alle Felder zwingend machen:
type VollständigesProdukt = Required<PartiellesProdukt>;

// Nur bestimmte Felder auswählen:
type ProduktVorschau = Pick<Produkt, "id" | "name" | "preis">;

// Bestimmte Felder ausschließen:
type ProduktOhneId = Omit<Produkt, "id">;

Diese Werkzeuge verhindern Wiederholungen und halten den Code DRY.

Arrays von Objekten

Die Kombination aus Array- und Objekttypen ist in der Praxis allgegenwärtig:

interface Artikel {
  id: string;
  titel: string;
  preis: number;
  verfügbar: boolean;
}

const katalog: Artikel[] = [
  { id: "A001", titel: "Tastatur", preis: 79.99, verfügbar: true },
  { id: "A002", titel: "Maus", preis: 29.99, verfügbar: false },
];

const verfügbareArtikel: Artikel[] = katalog.filter((a) => a.verfügbar);
const preise: number[] = katalog.map((a) => a.preis);

Auf typescript-playground.de ausprobieren

Die Typisierung von Objekten und Arrays lässt sich besonders gut interaktiv erkunden. Auf typescript-playground.de zeigt der Editor sofort an, wenn ein Objekt nicht der geforderten Struktur entspricht, und bietet präzises Autocomplete für alle Felder. Das macht den Playground zum idealen Lernwerkzeug für strukturierte Typen.

Fazit

Arrays und Objekte sind die wichtigsten Datenstrukturen in JavaScript-Projekten. TypeScript gibt beiden eine präzise Signatur. Vom einfachen string[] über verschachtelte Objekthierarchien bis zu Utility Types wie Partial und Pick deckt TypeScript alle Szenarien ab. Wer diese Konzepte beherrscht, kann komplexe Datenmodelle robust und wartbar modellieren.