Types d'intersection ('&')
Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 34 sur 73.
Alors que les types d’union vous permettent de créer des variables qui peuvent être de plusieurs types, les types d’intersection fonctionnent dans la direction opposée. Ils combinent plusieurs types en un seul type qui possède toutes les propriétés des types combinés.
Les types d’intersection utilisent l’opérateur esperluette (&) pour fusionner des types. Lorsque vous faites l’intersection de deux types d’objet, le résultat contient toutes les propriétés des deux types :
type HasName = { name: string };
type HasAge = { age: number };
type Person = HasName & HasAge;
// Person a maintenant les propriétés name ET age
let user: Person = {
name: "Alice",
age: 30
};C’est particulièrement utile lorsque vous souhaitez créer des types complexes à partir d’éléments plus petits et réutilisables. Au lieu de définir un seul type d’objet volumineux, vous pouvez créer des types ciblés pour des préoccupations spécifiques, puis les combiner selon vos besoins.
Les types d’intersection garantissent que le type résultant satisfait à toutes les exigences des types intersectés. La variable doit posséder chaque propriété de chaque type de l’intersection : il n’est pas possible de sélectionner certaines propriétés et d’en laisser d’autres comme avec les unions.
Défi
FacileCréez deux alias de type : HasName pour un objet avec une propriété name de type string, et HasAge pour un objet avec une propriété age de type number.
Créez un troisième alias de type appelé Person en faisant l’intersection de HasName et HasAge à l’aide de l’opérateur &.
Créez un autre alias de type appelé HasEmail pour un objet avec une propriété email de type string.
Créez un quatrième alias de type appelé Employee en faisant l’intersection des trois types : HasName, HasAge et HasEmail.
Créez maintenant les variables suivantes :
- Créez une variable nommée
userde typePersonavec le nom"Alice"et l’âge25 - Créez une variable nommée
workerde typeEmployeeavec le nom"Bob", l’âge30et l’adresse e-mail"bob@company.com"
Créez une fonction nommée displayPerson qui accepte un paramètre de type Person et renvoie une chaîne au format "Name: [name], Age: [age]".
Créez une autre fonction nommée displayEmployee qui accepte un paramètre de type Employee et renvoie une chaîne au format "Name: [name], Age: [age], Email: [email]".
Appelez les deux fonctions avec les variables appropriées et affichez les résultats sur des lignes distinctes.
Essayez vous-même
// TODO: Écrivez votre code ici
// Créez des alias de types pour HasName, HasAge, HasEmail
// Créez les types Person et Employee en utilisant l'intersection
// Créez les variables user et worker
// Créez les fonctions displayPerson et displayEmployee
// Appelez les fonctions et affichez les résultatsCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Introduction à TypeScript
1Premiers pas avec TS
Qu'est-ce que TypeScript ?Pourquoi utiliser TypeScript ?Votre premier code TypeScriptProcessus de compilation et erreursRécapitulatif : Introduction à TS4Travailler avec les fonctions
Typage des paramètres et valeurs de retourTypage des fonctions fléchéesLe type de retour 'void'Paramètres optionnels avec '?'Valeurs par défaut des paramètresTypage des paramètres RestDéfinir des types de fonctionsRécapitulatif : Créer des fonctions typées2Types fondamentaux
Types de base : str, num, booleanLe type 'any' : la porte de sortieLe type 'unknown'Travailler avec 'null' et 'undef'L'inférence de type en actionAnnotations de type explicitesRécapitulatif : Pratique des types fondamentaux5Types : Alias, Unions & Intersections
Alias de types pour les primitifsTypes d'union ('|')Travailler avec les types d'unionTypes littérauxTypes d'intersection ('&')Combiner des alias de typesRécapitulatif : Combinaisons de types avancées3Structure de données : Tableaux et Tuples
Tableaux typésModificateur 'readonly' pour les tableauxQu'est-ce qu'un tuple ?Déclaration et accès aux tuplesDéstructuration de tuplesTuples readonlyTableaux typés multidimensionnelsSpread operator avec les tableauxRécapitulatif : Tableaux et tuples6Typage des objets et interfaces
Annotations de type d'objet en ligneAlias de type pour les objetsIntroduction aux interfacesInterfaces vs Alias de typePropriétés optionnelles et ReadonlyÉtendre les interfaces et les typesAjout de méthodes aux interfacesRécapitulatif : Définir la structure des objetsEntraînez-vous par vous-même : Playground TypeScript