Les types d'intersection dans TypeScript
Cet article explique les types d'intersection dans TypeScript.
YouTube Video
Les types d'intersection dans TypeScript
Dans TypeScript, les types d'intersection permettent de combiner plusieurs types pour créer un nouveau type.
Que sont les types d'intersection ?
Les types d'intersection vous permettent de combiner plusieurs types pour définir un nouveau type avec toutes les propriétés de ces types. Les types d'intersection sont définis à l'aide du symbole & et exigent toutes les propriétés de chaque type constituant.
Exemple :
1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7 name: "John Doe",
8 age: 30
9};Dans ce code, en définissant type C = A & B, le type C devient un type objet avec les propriétés name (type string) et age (type number).
Avantages des types d'intersection
En utilisant les types d'intersection, vous pouvez réutiliser des types existants et définir des types plus flexibles et composites. Cela améliore la maintenabilité et l'évolutivité de votre code. De plus, les types d'intersection peuvent appliquer des contraintes de plusieurs types différents simultanément, améliorant ainsi la sécurité des types.
Avantages :
- Réutilisabilité : En combinant plusieurs types, vous pouvez réduire les définitions redondantes et réutiliser des types existants.
- Sécurité des types : Les types d'intersection améliorent la vérification des types en ne permettant que les objets qui satisfont les conditions de plusieurs types.
Cas d'utilisation des types d'intersection
Les types d'intersection sont extrêmement utiles lors de l'extension d'objets ou d'interfaces. En particulier, c'est utile lorsque vous souhaitez représenter des objets avec plusieurs propriétés.
Cas d'utilisation 1 : Objets avec plusieurs interfaces
1interface Drivable {
2 drive(): void;
3}
4
5interface Flyable {
6 fly(): void;
7}
8
9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12 drive() {
13 console.log("Driving on the road");
14 },
15 fly() {
16 console.log("Flying in the sky");
17 }
18};
19
20car.drive(); // "Driving on the road"
21car.fly(); // "Flying in the sky"
Dans cet exemple, le type Vehicle est défini comme un type d'intersection combinant Drivable et Flyable. Un objet de type Vehicle doit implémenter à la fois les méthodes drive() et fly().
Cas d'utilisation 2 : Combinaison de classes et de types d'intersection
En combinant des classes et des types d'intersection, il est possible de créer des objets possédant les propriétés de plusieurs interfaces.
1interface Person {
2 name: string;
3}
4
5interface Employee {
6 employeeId: number;
7}
8
9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12 constructor(public name: string, public employeeId: number) {}
13
14 getDetails() {
15 return `${this.name}, Employee ID: ${this.employeeId}`;
16 }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"
Ici, nous utilisons le type d'intersection PersonEmployee de Person et Employee pour que la classe CompanyWorker possède les propriétés des deux.
Points à considérer avec les types d'intersection
Un point important lors de l'utilisation des types d'intersection est d'être conscient de la possibilité de conflits de propriétés. Si des propriétés portant le même nom ont des annotations de type différentes dans différents types, une erreur peut survenir.
Exemple de prudence :
1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8 id: 1
9};Dans cet exemple, les propriétés id de A et B entrent en conflit, provoquant une erreur lors de la définition d'un objet de type C. Dans de tels cas, un examen de conception est nécessaire pour éviter les conflits de propriétés.
Exemple de code avec annotations de type pour les types d'intersection
Enfin, voici un exemple de code réel incluant des annotations de type.
Exemple 1 : Affiche les détails d'un objet
1type ContactInfo = { phone: string; email: string };
2type Address = { city: string; postalCode: string };
3
4type PersonDetails = ContactInfo & Address;
5
6const details: PersonDetails = {
7 phone: "123-4567",
8 email: "example@mail.com",
9 city: "New York",
10 postalCode: "10001"
11};
12
13console.log(details);Exemple 2 : Objet avec des propriétés supplémentaires
1interface BasicInfo {
2 name: string;
3 age: number;
4}
5
6interface WorkInfo {
7 company: string;
8 position: string;
9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14 name: "Bob",
15 age: 28,
16 company: "Tech Corp",
17 position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);Conclusion
Les types d'intersection de TypeScript sont une fonctionnalité puissante pour combiner plusieurs types en un nouveau type. Cela améliore la réutilisation et la sécurité du code, permettant des définitions de type complexes. En tirant parti de la flexibilité de conception tout en étant prudent avec les conflits de type, vous pouvez obtenir un code robuste et hautement lisible.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.