Types utilitaires dans TypeScript

Cet article explique les types utilitaires dans TypeScript.

YouTube Video

Types utilitaires dans TypeScript

Les types utilitaires dans TypeScript sont des outils pratiques pour créer de nouveaux types basés sur des types existants. Cela permet des définitions de type plus flexibles et augmente la réutilisabilité du code. Ici, nous expliquerons en détail les types utilitaires couramment utilisés et discuterons de leur utilisation avec des exemples de code.

Partial<T>

Partial<T> rend toutes les propriétés d'un type d'objet optionnelles (permettant undefined). C'est utile lorsque vous souhaitez utiliser uniquement certaines des propriétés du type original.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7function updateUser(user: Partial<User>) {
 8  console.log(user);
 9}
10
11updateUser({ name: "Alice" }); // Updates only 'name'

Explication :

Dans l'exemple ci-dessus, utiliser Partial<User> rend toutes les propriétés du type User optionnelles. Ainsi, dans la fonction updateUser, vous pouvez transmettre uniquement un sous-ensemble des propriétés.

Required<T>

Required<T> rend toutes les propriétés, y compris celles optionnelles, obligatoires. Il est utilisé lorsque vous souhaitez rendre obligatoires des propriétés qui sont optionnelles.

 1interface User {
 2  id: number;
 3  name?: string;
 4  age?: number;
 5}
 6
 7function createUser(user: Required<User>) {
 8  console.log(user);
 9}
10
11// createUser({ id: 1 }); // Error: 'name' and 'age' are required
12createUser({ id: 1, name: "Alice", age: 25 });

Explication :

En utilisant Required<User>, des propriétés comme name et age sont considérées comme obligatoires.

Readonly<T>

Readonly<T> rend toutes les propriétés d'un objet en lecture seule. Cela empêche les valeurs de l'objet d'être modifiées.

 1interface User {
 2  id: number;
 3  name: string;
 4}
 5
 6const user: Readonly<User> = {
 7  id: 1,
 8  name: "Alice"
 9};
10
11// user.id = 2; // Error: 'id' is read-only
12console.log(user);

Explication :

En utilisant Readonly<T>, vous pouvez protéger les propriétés d'un objet contre les modifications. C'est efficace lorsque vous souhaitez éviter que les données ne soient modifiées accidentellement durant le développement.

Record<K, T>

Record<K, T> crée un type de mappage avec des types de clés et de valeurs spécifiés. K est le type des clés (comme string ou number), et T est le type des valeurs.

 1type Roles = "admin" | "user" | "guest";
 2interface Permissions {
 3  read: boolean;
 4  write: boolean;
 5}
 6
 7const rolePermissions: Record<Roles, Permissions> = {
 8  admin: { read: true, write: true },
 9  user: { read: true, write: false },
10  guest: { read: false, write: false },
11};
12
13console.log(rolePermissions);

Explication :

Record<K, T> est utile lorsque vous souhaitez définir des paires clé-valeur. Dans l'exemple ci-dessus, les permissions sont définies en fonction des rôles des utilisateurs.

Pick<T, K>

Pick<T, K> extrait uniquement les propriétés spécifiées d'un type d'objet. Vous pouvez créer un nouveau type en extrayant uniquement les propriétés nécessaires.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7type UserSummary = Pick<User, "id" | "name">;
 8
 9const summary: UserSummary = {
10  id: 1,
11  name: "Alice"
12};
13
14console.log(summary);

Explication :

En utilisant Pick<T, K>, vous pouvez extraire des propriétés spécifiques d'un type d'objet et les traiter comme un nouveau type. Par exemple, seules id et name sont extraites dans l'exemple ci-dessus.

Omit<T, K>

Omit<T, K> exclut des propriétés spécifiées d’un type objet. Ceci est l’opération opposée à Pick.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5  email: string;
 6}
 7
 8type UserWithoutEmail = Omit<User, "email">;
 9
10const userWithoutEmail: UserWithoutEmail = {
11  id: 1,
12  name: "Alice",
13  age: 25
14};
15
16console.log(userWithoutEmail);

Explication :

En utilisant Omit<T, K>, vous pouvez créer un nouveau type en excluant certaines propriétés. Dans l’exemple ci-dessus, la propriété email est exclue.

Exclude<T, U>

Exclude<T, U> crée un nouveau type en supprimant le type U du type union T. Il est utilisé lorsque vous voulez supprimer un type spécifique.

1type Status = "active" | "inactive" | "pending";
2type ExcludedStatus = Exclude<Status, "pending">;
3
4const status: ExcludedStatus = "active"; // "pending" is excluded, so it cannot be chosen
5console.log(status);

Explication :

En utilisant Exclude<T, U>, vous pouvez supprimer des types inutiles dans un type union. Dans l’exemple ci-dessus, puisque "pending" est exclu, seuls "active" ou "inactive" peuvent être sélectionnés.

Extract<T, U>

Extract<T, U> extrait les parties correspondant au type U dans le type union T. Il est utile lorsque vous voulez extraire seulement un type spécifique.

1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const status: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(status);

Explication :

Extract<T, U> effectue l’opération opposée de Exclude. Dans l’exemple ci-dessus, seuls "active" et "pending" peuvent être sélectionnés.

NonNullable<T>

NonNullable<T> crée un type où null et undefined sont exclus. Il est utile lorsque vous voulez exclure ces valeurs dans des types optionnels.

1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const name: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(name);

Explication :

NonNullable<T> exclut null et undefined d’un type qui les contient. Ceci est utile lorsque vous voulez garantir qu’une valeur existe définitivement.

Conclusion

Les types utilitaires de TypeScript sont des outils puissants pour rendre les définitions de type plus concises et flexibles. Comprendre et utiliser correctement les types utilitaires de base comme Partial, Required, Readonly, Record, etc., peut améliorer la réutilisabilité et la maintenabilité du code. Maîtriser ces types permet de créer des définitions de type plus robustes et sûres, favorisant un développement efficace.

L’opérateur keyof dans TypeScript

L’opérateur keyof de TypeScript est utilisé pour récupérer tous les noms de propriétés d’un type objet. En utilisant cet opérateur, vous pouvez obtenir les clés d'un type d'objet sous forme de type union. Ceci est extrêmement utile pour écrire du code avec une sécurité des types.

Utilisation de base

1interface Person {
2    name: string;
3    age: number;
4    email: string;
5}
6
7// Use keyof to get the property names of Person
8type PersonKeys = keyof Person; // "name" | "age" | "email"

Exemple d'utilisation

1. Utilisation dans les arguments de fonction

   Vous pouvez utiliser keyof pour définir une fonction avec des types basés sur des propriétés spécifiques d'un objet.

1function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
2    return obj[key];
3}
4
5const person: Person = { name: "Alice", age: 30, email: "alice@example.com" };
6const name = getProperty(person, "name"); // type is string
7const age = getProperty(person, "age");   // type is number

2. Renforcer les contraintes de type

   En utilisant keyof, vous pouvez vous assurer que les clés passées à une fonction sont validées lors de la compilation.

1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error

Résumé

• L'opérateur keyof est utilisé pour récupérer tous les noms de propriétés d'un type d'objet.
• Vous pouvez obtenir les noms des propriétés sous forme de type union, en assurant la sécurité des types.
• En l'utilisant dans les arguments de fonction, vous pouvez limiter la fonction à n'accepter que des noms de propriété valides.

De cette manière, l'opérateur keyof améliore la sécurité des types dans TypeScript et vous aide à écrire un code plus robuste.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video