Types d'union et d'intersection TypeScript

TypeScript propose de puissantes fonctionnalités de système de types qui vous aident à écrire du code plus sûr et plus prévisible. Parmi ces fonctionnalités figurent les types d'union et d'intersection, qui offrent une certaine flexibilité dans la définition et la gestion de types complexes. Cet article présente ces concepts et fournit des exemples pour illustrer leur utilisation.

Quels sont les types d’unions ?

Les types d'union permettent à une variable de contenir des valeurs de différents types. Cela est utile lorsque vous devez représenter une valeur qui peut être de plusieurs types. Les types d'union sont indiqués à l'aide du symbole | (pipe).

Définition des types d'unions

Pour définir un type d'union, vous spécifiez plusieurs types séparés par le symbole |:

let value: string | number;

value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'

Dans cet exemple, la variable value peut être soit une string soit un number, mais pas un boolean.

Utilisation des types d'union dans les fonctions

Les types d'union sont particulièrement utiles dans les fonctions où les paramètres ou les types de retour peuvent être de plusieurs types:

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(formatValue("hello")); // Output: HELLO
console.log(formatValue(123.456)); // Output: 123.46

La fonction formatValue prend un paramètre qui peut être soit une chaîne soit un nombre et le formate en conséquence.

Quels sont les types d’intersections ?

Les types d'intersection vous permettent de combiner plusieurs types en un seul. Cela signifie qu'une valeur du type d'intersection satisfera tous les types de l'intersection. Les types d'intersection sont indiqués à l'aide du symbole & (esperluette).

Définition des types d'intersections

Pour définir un type d'intersection, vous spécifiez plusieurs types séparés par le symbole &:

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John Doe",
  employeeId: 1234
};

console.log(john.name); // Output: John Doe
console.log(john.employeeId); // Output: 1234

Dans cet exemple, le type EmployeePerson combine les interfaces Person et Employee, ce qui donne un type qui possède à la fois les propriétés name et employeeId.

Utilisation des types d'intersection dans les fonctions

Les types d'intersection peuvent également être utilisés dans les fonctions pour nécessiter plusieurs propriétés de type:

function printEmployeeDetails(employee: Person & Employee): void {
  console.log(`Name: ${employee.name}`);
  console.log(`Employee ID: ${employee.employeeId}`);
}

const jane: EmployeePerson = {
  name: "Jane Smith",
  employeeId: 5678
};

printEmployeeDetails(jane);
// Output:
// Name: Jane Smith
// Employee ID: 5678

La fonction printEmployeeDetails nécessite un argument qui satisfait à la fois les types Person et Employee.

Combinaison des types Union et Intersection

Vous pouvez combiner les types d'union et d'intersection pour créer des définitions de type complexes:

type Shape = Circle | Rectangle;

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius * shape.radius;
  } else {
    return shape.width * shape.height;
  }
}

const myCircle: Circle = { kind: "circle", radius: 10 };
const myRectangle: Rectangle = { kind: "rectangle", width: 20, height: 30 };

console.log(getArea(myCircle)); // Output: 314.159...
console.log(getArea(myRectangle)); // Output: 600

Dans cet exemple, le type Shape est une union de Circle et Rectangle, et la fonction getArea gère les deux types en conséquence.

Conclusion

Les types d'union et d'intersection dans TypeScript offrent des moyens puissants de gérer et de combiner des types, offrant flexibilité et précision dans les définitions de type. Les types d'union permettent à une variable d'être l'un des nombreux types, tandis que les types d'intersection combinent plusieurs types en un seul. En utilisant ces fonctionnalités, vous pouvez créer des applications plus robustes et plus sûres en termes de types.

Entraînez-vous à utiliser les types d'union et d'intersection pour vous familiariser avec leurs capacités et améliorer vos compétences en codage TypeScript.