Erweiterte TypeScript-Typen anhand von Beispielen erklärt

TypeScript bietet mehrere erweiterte Typen, die über die Basistypen hinausgehen und flexiblere und leistungsfähigere Typsysteme ermöglichen. Diese erweiterten Typen helfen bei der Erstellung robuster Anwendungen, indem sie zusätzliche Möglichkeiten zum Definieren und Durchsetzen von Typbeschränkungen bieten. Dieser Artikel untersucht einige dieser erweiterten Typen anhand von Beispielen.

Union-Typen

Union-Typen ermöglichen, dass eine Variable mehrere Typen annehmen kann. Dies kann nützlich sein, wenn ein Wert mehrere Typen annehmen kann, aber entsprechend seines tatsächlichen Typs behandelt werden soll.

// Union type example

function formatValue(value: string | number): string {
  if (typeof value === 'string') {
    return `String: ${value}`;
  } else {
    return `Number: ${value.toFixed(2)}`;
  }
}

console.log(formatValue("Hello"));
console.log(formatValue(123.456));

In diesem Beispiel akzeptiert die Funktion „formatValue“ entweder eine Zeichenfolge oder eine Zahl und formatiert den Wert entsprechend.

Kreuzungstypen

Schnittmengentypen kombinieren mehrere Typen zu einem. Ein Objekt eines Schnittmengentyps verfügt über alle Eigenschaften der kombinierten Typen. Dies ist nützlich, um mehrere Typen zusammenzusetzen.

// Intersection type example

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

interface Contact {
  email: string;
  phone: string;
}

type Employee = Person & Contact;

const employee: Employee = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com",
  phone: "123-456-7890"
};

console.log(employee);

Hier ist der Typ „Mitarbeiter“ eine Schnittmenge aus „Person“ und „Kontakt“, d. h. er enthält Eigenschaften aus beiden Schnittstellen.

Literale Typen

Literale Typen geben genaue Werte an, die eine Variable enthalten kann. Dies kann insbesondere nützlich sein, um sicherzustellen, dass nur bestimmte Werte zulässig sind.

// Literal type example

type Direction = "up" | "down" | "left" | "right";

function move(direction: Direction): void {
  console.log(`Moving ${direction}`);
}

move("up");    // Valid
move("down");  // Valid
// move("side"); // Error: Argument of type '"side"' is not assignable to parameter of type 'Direction'.

Der Typ „Richtung“ ist hier auf vier bestimmte Zeichenfolgenwerte beschränkt, um sicherzustellen, dass in der Funktion „Verschieben“ nur diese Richtungen verwendet werden können.

Tupeltypen

Tupeltypen stellen ein Array mit einer festen Anzahl von Elementen dar, wobei jedes Element einen anderen Typ haben kann. Tupel sind nützlich, um Sammlungen heterogener Elemente mit fester Größe darzustellen.

// Tuple type example

let user: [string, number] = ["Alice", 30];

console.log(user[0]); // "Alice"
console.log(user[1]); // 30

// user = [30, "Alice"]; // Error: Type 'number' is not assignable to type 'string'.

Das „Benutzer“-Tupel wird mit einer Zeichenfolge gefolgt von einer Zahl definiert, und diese Struktur muss beibehalten werden.

Bedingte Typen

Bedingte Typen ermöglichen die Bestimmung von Typen auf der Grundlage von Bedingungen. Sie bieten eine Möglichkeit, den einen oder anderen Typ auf der Grundlage einer Bedingung auszuwählen.

// Conditional type example

type IsString = T extends string ? "Yes" : "No";

type Test1 = IsString;  // "Yes"
type Test2 = IsString;  // "No"

In diesem Beispiel prüft der Typ `IsString`, ob ein Typ `T` ein String ist. Wenn dies der Fall ist, gibt er `"Yes"` zurück, andernfalls `"No"`.

Zugeordnete Typen

Zugeordnete Typen ermöglichen das Erstellen neuer Typen durch Transformieren der Eigenschaften eines vorhandenen Typs. Dies ist nützlich, um vorhandene Typen zu ändern oder zu erweitern.

// Mapped type example

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = {
  name: "Alice",
  age: 30
};

// readonlyPerson.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

Der Typ „ReadonlyPerson“ transformiert den Typ „Person“, indem er alle seine Eigenschaften schreibgeschützt macht.

Abschluss

Die erweiterten Typen von TypeScript bieten leistungsstarke Tools zum Definieren und Verwalten komplexer Typanforderungen. Durch die Verwendung von Union-, Schnittmengen-, Literal-, Tupel-, Bedingungs- und zugeordneten Typen können Entwickler robustere und wartungsfreundlichere Anwendungen erstellen. Das Verständnis und die effektive Anwendung dieser Typen kann die Typensicherheit und Flexibilität von TypeScript-Code erheblich verbessern.