Types d'union et d'intersection dans TypeScript

Types d'union et d'intersection dans TypeScript

Introduction

TypeScript, un sur-ensemble de JavaScript fortement typé, apporte de robustes fonctionnalités de vérification de type au développement JavaScript. Ces fonctionnalités aident les développeurs à détecter les erreurs plus tôt et à écrire un code plus maintenable. Parmi les fonctionnalités puissantes de TypeScript figurent les Types d'union et les Types d'intersection. Ces types offrent flexibilité et précision dans la définition de types complexes, ce qui peut être crucial pour les applications à grande échelle.

Le but de cet article est d'expliquer les concepts de types d'union et d'intersection dans TypeScript. Nous allons plonger dans un exemple pour illustrer comment ces types peuvent être combinés pour créer une définition de type plus expressive. À la fin de cet article, vous devriez avoir une solide compréhension de la façon d’utiliser efficacement ces types dans vos projets TypeScript.

D'accord, sans plus tarder, allons-y.

Étude de cas

J'ai ce mème ci-dessous.

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

Il existe une règle tacite dans l’art de la conversation : ne demandez jamais à une femme son âge et ne demandez jamais à un homme son salaire. Mais augmentons les enjeux et rendons cela plus intrigant. Imaginez une troisième règle : ne demandez jamais à un codeur son nombre de projets inachevés. Il est préférable de laisser certains secrets dans l’ombre, car qu’il s’agisse de l’âge, des revenus ou de projets parallèles abandonnés, les réponses s’accompagnent souvent d’histoires que vous n’êtes peut-être pas prêt à entendre.

OK, concentrons-nous sur les deux premiers éléments : l'homme et la femme.

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

En TypeScript, nous pourrions créer le type comme ceci :

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

Le problème ici si nous créons un objet basé sur le type Personne

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

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

Les deux objets ci-dessus n'afficheront aucune erreur de type.

Les types Intersection et Union viennent résoudre ce problème.

Types de syndicats

Un Type d'union permet à une variable d'être de plusieurs types. Dans notre exemple :

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

Cette partie de la définition du type indique qu'une personne peut avoir l'une des deux formes suivantes :

1. Un objet avec genre : 'homme' et dontAsk étant soit « salaire » ou « relation ».
2. Un objet avec le genre : 'femme' et dontAsk étant soit « poids » ou « âge ».

Cette flexibilité est utile lorsqu'il s'agit de données qui peuvent prendre plusieurs formes.

Types d'intersections

Un Type d'intersection combine plusieurs types en un seul. Une variable de type intersection doit satisfaire tous les types constituants. Dans notre exemple :

& {
    address?: string,
    fullName: string
}

Cette partie de la définition du type indique qu'une personne doit avoir :

• Une propriété d'adresse facultative de type chaîne.
• Une propriété fullName obligatoire de type string.

Combinaison de types d'union et d'intersection

Le type Person complet combine les types d'union et d'intersection :

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

Un objet Person doit correspondre à l'un des types d'union et doit également inclure les propriétés définies dans le type d'intersection. Voici quelques objets Person valides :

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

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

Si vous définissez la personne 1, ne demandez pas l'âge, cela affiche une erreur. Dans Visual Studio Code qui prend en charge TypeScript, une erreur s'affichera lorsque nous survolerons l'objet.

Résumé

Dans TypeScript, Les types d'union permettent à une variable d'être l'un des différents types, tandis que les Types d'intersection combinent plusieurs types en un seul. En comprenant et en utilisant ces types, vous pouvez écrire du code TypeScript plus flexible et plus robuste. L'exemple de type Personne illustre comment combiner ces concepts pour créer des définitions de type complexes et précises.

L'utilisation efficace de TypeScript peut améliorer considérablement la maintenabilité du code. Lorsqu'un nouveau développeur rejoint votre équipe, des définitions de type claires réduisent le besoin de longues explications. Au lieu de déchiffrer le code, l'équipe peut se concentrer sur la discussion du déroulement et des objectifs du projet, améliorant ainsi la productivité et la collaboration.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!