Union- und Intersection-Typen in TypeScript

Union- und Intersection-Typen in TypeScript

Einführung

TypeScript, eine stark typisierte Obermenge von JavaScript, bringt robuste Typprüfungsfunktionen in die JavaScript-Entwicklung. Diese Funktionen helfen Entwicklern, Fehler frühzeitig zu erkennen und wartbareren Code zu schreiben. Zu den leistungsstarken Funktionen von TypeScript gehören Union Types und Intersection Types. Diese Typen bieten Flexibilität und Präzision bei der Definition komplexer Typen, was für umfangreiche Anwendungen von entscheidender Bedeutung sein kann.

Ziel dieses Artikels ist es, die Konzepte von Union- und Schnittmengentypen in TypeScript zu erläutern. Wir werden uns anhand eines Beispiels veranschaulichen, wie diese Typen kombiniert werden können, um eine aussagekräftigere Typdefinition zu erstellen. Am Ende dieses Artikels sollten Sie ein solides Verständnis dafür haben, wie Sie diese Typen effektiv in Ihren TypeScript-Projekten verwenden.

Okay, ohne weitere Umschweife, lasst uns eintauchen.

Fallstudie

Ich habe dieses Meme unten.

https://www.picturepunches.com/meme/317642

Es gibt eine unausgesprochene Regel in der Konversationskunst: Fragen Sie niemals eine Frau nach ihrem Alter und Fragen Sie niemals einen Mann nach seinem Gehalt. Aber lasst uns den Einsatz erhöhen und die Sache noch faszinierender machen. Stellen Sie sich eine dritte Regel vor: Fragen Sie niemals einen Programmierer nach der Anzahl seiner unvollendeten Projekte. Manche Geheimnisse bleiben am besten im Verborgenen – denn egal, ob es um Alter, Einkommen oder aufgegebene Nebenprojekte geht, die Antworten kommen oft mit Geschichten, die Sie möglicherweise nicht hören möchten.

OK, konzentrieren wir uns auf die ersten beiden Punkte: Mann und Frau.

	Dont ask 1	Dont ask 2	Should ask 1	Should ask 2
Man	Salary	Relationship	Address	Full name
Woman	Age	Weight	Address	Full name

In TypeScript könnten wir den Typ so erstellen:

type Person = {
    gender: 'man' | 'woman',
    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};

Das Problem besteht hier, wenn wir ein Objekt basierend auf dem Personentyp erstellen

const person1: Person = {
    gender: 'man',
    dontAsk: 'weight',
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'salary',
};

Beide beiden Objekte oben zeigen keinen Typfehler.

Schnittpunkt- und Union-Typen lösen dieses Problem.

Union-Typen

A Union Type ermöglicht, dass eine Variable einer von mehreren Typen sein kann. In unserem Beispiel:

{
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'size'
}

In diesem Teil der Typdefinition heißt es, dass eine Person eine von zwei Formen haben kann:

1. Ein Objekt mit dem Geschlecht „Mann“ und „dontAsk“, das entweder „Gehalt“ oder „Beziehung“ bedeutet.
2. Ein Objekt mit Geschlecht: „Frau“ und „DontAsk“ bedeutet entweder „Gewicht“ oder „Alter“.

Diese Flexibilität ist nützlich, wenn Sie mit Daten arbeiten, die mehrere Formen annehmen können.

Kreuzungstypen

Ein Kreuzungstyp kombiniert mehrere Typen zu einem. Eine Variable eines Schnittpunkttyps muss alle konstituierenden Typen erfüllen. In unserem Beispiel:

& {
    address?: string,
    fullName: string
}

In diesem Teil der Typdefinition heißt es, dass eine Person Folgendes haben muss:

• Eine optionale Adresseigenschaft vom Typ String.
• Eine erforderliche fullName-Eigenschaft vom Typ string.

Kombinieren von Union- und Intersection-Typen

Der vollständige Typ „Person“ kombiniert sowohl Vereinigungs- als auch Schnittmengentypen:

type Person = ({
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'age'
}) & {
    address?: string,
    fullName: string
};

Ein Personenobjekt muss mit einem der Vereinigungstypen übereinstimmen und außerdem die im Schnittpunkttyp definierten Eigenschaften enthalten. Hier sind einige gültige Personenobjekte:

const person1: Person = {
    gender: 'man',
    dontAsk: 'salary',
    fullName: 'John Doe'
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'weight',
    fullName: 'Jane Doe',
    address: '123 Main St'
};

Wenn „Person1 definieren, nicht nach Alter fragen“, wird ein Fehler angezeigt. In Visual Studio Code, das über eine integrierte Unterstützung für TypeScript verfügt, wird ein Fehler angezeigt, wenn wir den Mauszeiger über das Objekt bewegen.

Zusammenfassung

In TypeScript ermöglichen Union Types einer Variablen, einer von mehreren Typen zu sein, während Intersection Types mehrere Typen zu einem kombinieren. Wenn Sie diese Typen verstehen und verwenden, können Sie flexibleren und robusteren TypeScript-Code schreiben. Das Beispiel für den Typ „Person“ veranschaulicht, wie diese Konzepte kombiniert werden, um komplexe und präzise Typdefinitionen zu erstellen.

Die effektive Verwendung von TypeScript kann die Wartbarkeit des Codes erheblich verbessern. Wenn ein neuer Entwickler Ihrem Team beitritt, reduzieren klare Typdefinitionen den Bedarf an langwierigen Erklärungen. Anstatt Code zu entschlüsseln, kann sich das Team auf die Diskussion des Projektablaufs und der Ziele konzentrieren und so die Produktivität und Zusammenarbeit steigern.

Das obige ist der detaillierte Inhalt vonUnion- und Intersection-Typen in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!