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.