Einführung in Mapped Types

Mapped Types ermöglichen es Ihnen, vorhandene Typen in neue umzuwandeln, indem auf jede Eigenschaft eines Typs Operationen angewendet werden.

Sie eignen sich hervorragend zum Erstellen flexibler und wiederverwendbarer Typstrukturen in TypeScript.

Was sind Mapped Types?

Mapped Types verwenden eine Syntax wie { [P in keyof T]: T[P] }, um die Eigenschaften eines Typs T zu durchlaufen.

Grundlegendes Beispiel für Mapped Types

Hier ist ein einfaches Beispiel dafür, wie Sie mit einem Mapped Type eine schreibgeschützte Version eines Typs erstellen:

type User = {
  name: string;
  age: number;
};

type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

Integrierte Mapped Types verwenden

TypeScript stellt mehrere integrierte Mapped Types bereit, zum Beispiel:

• Readonly<T>: Macht alle Eigenschaften von T schreibgeschützt.
• Partial<T>: Macht alle Eigenschaften von T optional.
• Required<T>: Macht alle Eigenschaften von T erforderlich.

type User = {
  name: string;
  age: number;
};

// Example of Partial
const user: Partial<User> = {
  name: 'John',
};

Mapping über Union-Typen

Mapped Types können auch mit Union-Typen verwendet werden, um neue, kombinierte Typen zu erstellen:

type Status = 'active' | 'inactive';

type StatusFlags = {
  [K in Status]: boolean;
};

const flags: StatusFlags = {
  active: true,
  inactive: false,
};

Bedingte Mapped Types

Sie können bedingte Typen zusammen mit Mapped Types verwenden, um komplexere Typtransformationen zu erstellen.

type User = {
  name: string;
  age?: number;
};

type NonOptional<T> = {
  [K in keyof T]-?: T[K];
};

type RequiredUser = NonOptional<User>;

Fortgeschrittenes Beispiel: Eigenschaften ausschließen

So können Sie einen Mapped Type erstellen, der bestimmte Eigenschaften ausschließt:

type User = {
  id: number;
  name: string;
  password: string;
};

type PublicUser = {
  [K in keyof User as Exclude<K, 'password'>]: User[K];
};

Übungsaufgabe

Erstellen Sie einen Mapped Type, der allen Eigenschaften eines Product-Typs den Modifikator readonly hinzufügt. Testen Sie ihn, indem Sie eine Variable des neuen Typs deklarieren.

Herzlichen Glückwunsch!

Sie haben gelernt, wie Sie Mapped Types verwenden, um vorhandene Typen dynamisch in neue Typen umzuwandeln. Üben Sie diese Techniken, um Ihren TypeScript-Code noch leistungsfähiger zu machen!