ts-pattern für TypeScript: Vollständige Anleitung mit Beispielen

Die Bibliothek ts-pattern bringt einen leistungsstarken und ausdrucksstarken Pattern-Matching-Mechanismus in TypeScript, inspiriert von Sprachen wie OCaml, Rust, Haskell und Scala. Anstelle von langen if-else- oder switch-case-Ketten ermöglicht ts-pattern eine deklarative Beschreibung der Verzweigungslogik, indem es die Struktur und Typen von Daten prüft. Dies ist besonders wertvoll bei der Arbeit mit algebraischen Datentypen (ADTs) wie discriminated Unions, optionalen Werten (Option) oder Ergebnissen (Result).

Warum ist das sinnvoll? Erstens wird der Code lesbarer und prägnanter. Anstatt komplexe verschachtelte Objekte mit vielen Prüfungen zu analysieren, beschreiben Sie die gewünschte Datenstruktur, und die Bibliothek findet selbstständig die passende Option. Zweitens bietet ts-pattern eine erschöpfende Prüfung (exhaustiveness check): Wenn Sie nicht alle möglichen Fälle behandelt haben, gibt TypeScript bereits zur Kompilierzeit einen Fehler aus. Das reduziert die Anzahl von Bugs durch übersehene Zustände drastisch. Drittens ist die Bibliothek vollständig typisiert und nahtlos in das Typsystem von TypeScript integriert, was Refactoring sicher und vorhersehbar macht.

ts-pattern ist mehr als nur ein Switch-Ersatz. Es ist ein vollwertiges Werkzeug zur Datenzerlegung, das nicht nur Werte, sondern auch deren Typen, Strukturen, Bereiche und sogar benutzerdefinierte Prädikate abgleichen kann. Die Bibliothek wird aktiv in Projekten eingesetzt, bei denen Zuverlässigkeit und Ausdrucksstärke wichtig sind – von Frontend-Anwendungen mit React/Redux bis hin zu Backend-Diensten auf Node.js.

Installation

Die Installation der Bibliothek erfolgt über den Paketmanager npm (oder yarn/pnpm). Stellen Sie sicher, dass Ihr Projekt TypeScript Version 4.0 oder höher verwendet.

npm install ts-pattern

Nach der Installation ist die Bibliothek einsatzbereit. Es sind keine zusätzlichen Einstellungen in der tsconfig.json erforderlich.

Schnellstart

Beginnen wir mit einem klassischen Beispiel – der Verarbeitung eines HTTP-Request-Ergebnisses. Stellen wir uns eine discriminated Union vor, die den Ladezustand von Daten beschreibt.

import { match } from 'ts-pattern';

// Mögliche Zustände definieren
type State =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: string }
  | { status: 'error'; error: Error };

// Funktion, die je nach Zustand einen Text zurückgibt
function getStatusMessage(state: State): string {
  return match(state)
    .with({ status: 'idle' }, () => 'Warten...')
    .with({ status: 'loading' }, () => 'Laden...')
    .with({ status: 'success' }, ({ data }) => `Daten: ${data}`)
    .with({ status: 'error' }, ({ error }) => `Fehler: ${error.message}`)
    .exhaustive(); // Prüft, ob alle Fälle behandelt wurden
}

// Anwendungsbeispiele
console.log(getStatusMessage({ status: 'idle' })); // "Warten..."
console.log(getStatusMessage({ status: 'loading' })); // "Laden..."
console.log(getStatusMessage({ status: 'success', data: 'Hallo, Welt!' })); // "Daten: Hallo, Welt!"
console.log(getStatusMessage({ status: 'error', error: new Error('404') })); // "Fehler: 404"

Dieses Beispiel zeigt die grundlegende Idee: Wir gleichen das Objekt state mit verschiedenen Mustern ab. Jedes Muster ist eine partielle Beschreibung der Objektstruktur. Stimmt die Struktur überein, wird die entsprechende Funktion ausgeführt. Die Methode .exhaustive() stellt sicher, dass keine der Optionen vergessen wurde.

Wichtige Methoden und Funktionen

Die Bibliothek bietet mehrere Schlüsselfunktionen und -methoden. Sehen wir sie uns im Detail an.

1. match(value)

Signatur: match<I, O>(value: I): Match<I, O>

Funktion: Startet den Pattern-Matching-Prozess. Sie übergeben den Wert, den Sie abgleichen möchten, und erhalten ein Objekt, auf dem Sie die .with()-Methode aufrufen können.