5 Fortgeschrittene TypeScript-Muster für Senior-Entwickler

TypeScript ist zum Industriestandard für die groß angelegte Webentwicklung geworden. Während die meisten Entwickler die Grundlagen von Schnittstellen und Typen kennen, liegt die wahre Kraft in seinem fortgeschrittenen Typsystem. Hier sind 5 Muster, die Sie als Senior-Entwickler auszeichnen werden.

1. Generic Constraints

Generics sind mächtig, aber manchmal müssen Sie einschränken, was übergeben werden kann. extends ist hier Ihr Freund.

interface HasId {
  id: string;
}

function getById<T extends HasId>(list: T[], id: string): T | undefined {
  return list.find((item) => item.id === id);
}

Indem wir sicherstellen, dass T HasId erweitert, garantieren wir, dass der Zugriff auf .id innerhalb der Funktion sicher ist.

2. Conditional Types

Bedingte Typen ermöglichen es Ihnen, ungleichmäßige Typzuordnungen zu erstellen. Die Syntax ähnelt dem ternären Operator in JavaScript.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

Ein praktischer Anwendungsfall ist das Herausfiltern von Typen aus einer Union:

type Diff<T, U> = T extends U ? never : T;
type NonNullable<T> = Diff<T, null | undefined>;

3. Mapped Types

Zugeordnete Typen ermöglichen es Ihnen, neue Typen basierend auf alten zu erstellen, indem Sie Eigenschaften transformieren.

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadOnlyUser = ReadOnly<User>;

Sie können sogar Modifikatoren hinzufügen oder entfernen:

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

4. Template Literal Types

In TypeScript 4.1 eingeführt, ermöglichen diese die direkte Manipulation von String-Typen.

type World = 'world';
type Greeting = `hello ${World}`; // "hello world"

type Color = 'red' | 'blue';
type Quantity = 'light' | 'dark';

type Palette = `${Quantity}-${Color}`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue"

Dies ist unglaublich nützlich für die Typisierung von Strings, die einem bestimmten Muster folgen, wie CSS-Klassen oder Ereignisnamen.

5. Das infer Schlüsselwort

Das infer Schlüsselwort innerhalb von bedingten Typen ermöglicht es Ihnen, Typen aus anderen Typen zu extrahieren.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function check(): boolean {
  return true;
}

type CheckReturn = ReturnType<typeof check>; // boolean

Hier bitten wir TypeScript, den Rückgabetyp R einer Funktion zu "inferieren" (abzuleiten) und ihn zurückzugeben.

Fazit

Das Beherrschen dieser Muster ermöglicht es Ihnen, Bibliotheken und Dienstprogramme zu schreiben, die robust sind und eine hervorragende Entwicklererfahrung (DX) bieten. Das Ziel von fortgeschrittenem TypeScript ist nicht Komplexität um der Komplexität willen, sondern Sicherheit und Ausdruckskraft.