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.

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!