TypeScript-Union- und Schnittmengentypen

TypeScript bietet leistungsstarke Typsystemfunktionen, mit denen Sie sichereren und vorhersehbareren Code schreiben können. Zu diesen Funktionen gehören Union- und Schnittmengentypen, die Flexibilität beim Definieren und Verwalten komplexer Typen bieten. Dieser Artikel stellt diese Konzepte vor und liefert Beispiele zur Veranschaulichung ihrer Verwendung.

Was sind Union-Typen?

Union-Typen ermöglichen es einer Variable, Werte unterschiedlichen Typs zu enthalten. Dies ist nützlich, wenn Sie einen Wert darstellen müssen, der mehrere Typen haben kann. Union-Typen werden mit dem Symbol | (Pipe) gekennzeichnet.

Definieren von Union-Typen

Um einen Union-Typ zu definieren, geben Sie mehrere Typen an, getrennt durch das Symbol |:

let value: string | number;

value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'

In diesem Beispiel kann die Variable Wert entweder ein String oder eine Zahl sein, aber kein Boolescher Wert.

Verwenden von Union-Typen in Funktionen

Union-Typen sind insbesondere in Funktionen nützlich, bei denen Parameter oder Rückgabetypen mehrere Typen sein können:

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(formatValue("hello")); // Output: HELLO
console.log(formatValue(123.456)); // Output: 123.46

Die Funktion formatValue nimmt einen Parameter, der entweder eine Zeichenfolge oder eine Zahl sein kann, und formatiert ihn entsprechend.

Was sind Kreuzungstypen?

Schnittmengentypen ermöglichen es Ihnen, mehrere Typen zu einem zu kombinieren. Das bedeutet, dass ein Wert des Schnittmengentyps alle Typen in der Schnittmenge erfüllt. Schnittmengentypen werden mit dem Symbol & (kaufmännisches Und) gekennzeichnet.

Knotenpunkttypen definieren

Um einen Schnittpunkttyp zu definieren, geben Sie mehrere Typen an, getrennt durch das Symbol &:

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John Doe",
  employeeId: 1234
};

console.log(john.name); // Output: John Doe
console.log(john.employeeId); // Output: 1234

In diesem Beispiel kombiniert der Typ EmployeePerson die Schnittstellen Person und Employee. Das Ergebnis ist ein Typ, der sowohl die Eigenschaften name als auch employeeId besitzt.

Verwenden von Schnittmengentypen in Funktionen

Schnittmengentypen können auch in Funktionen verwendet werden, um mehrere Typeigenschaften anzufordern:

function printEmployeeDetails(employee: Person & Employee): void {
  console.log(`Name: ${employee.name}`);
  console.log(`Employee ID: ${employee.employeeId}`);
}

const jane: EmployeePerson = {
  name: "Jane Smith",
  employeeId: 5678
};

printEmployeeDetails(jane);
// Output:
// Name: Jane Smith
// Employee ID: 5678

Die Funktion printEmployeeDetails erfordert ein Argument, das sowohl den Typ Person als auch Employee erfüllt.

Kombinieren von Union- und Schnittmengentypen

Sie können Vereinigungs- und Schnittmengentypen kombinieren, um komplexe Typdefinitionen zu erstellen:

type Shape = Circle | Rectangle;

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius * shape.radius;
  } else {
    return shape.width * shape.height;
  }
}

const myCircle: Circle = { kind: "circle", radius: 10 };
const myRectangle: Rectangle = { kind: "rectangle", width: 20, height: 30 };

console.log(getArea(myCircle)); // Output: 314.159...
console.log(getArea(myRectangle)); // Output: 600

In diesem Beispiel ist der Typ Shape eine Vereinigung von Circle und Rectangle, und die Funktion getArea verarbeitet beide Typen entsprechend.

Abschluss

Union- und Schnittmengentypen in TypeScript bieten leistungsstarke Möglichkeiten zum Verwalten und Kombinieren von Typen und bieten Flexibilität und Präzision bei Typdefinitionen. Union-Typen ermöglichen, dass eine Variable einer von mehreren Typen sein kann, während Schnittmengentypen mehrere Typen zu einem kombinieren. Durch die Verwendung dieser Funktionen können Sie robustere und typsichere Anwendungen erstellen.

Üben Sie die Verwendung von Vereinigungs- und Schnittmengentypen, um sich mit ihren Funktionen vertraut zu machen und Ihre TypeScript-Codierungskenntnisse zu verbessern.