Boostez votre code : 7 types d’utilitaires TypeScript à explorer

Les types d’utilitaires TypeScript constituent un bon ensemble d’armes pour les développeurs cherchant à écrire un code plus robuste, flexible et maintenable. Ces outils puissants nous permettent de manipuler et de transformer les types existants, en les adaptant à nos besoins spécifiques et en facilitant la navigation dans des structures de données complexes en toute confiance. En tirant parti des types d’utilitaires, nous pouvons garantir la sécurité des types, réduire les erreurs et rationaliser notre processus de codage.

Dans cet article, nous découvrirons sept types d’utilitaires TypeScript essentiels qui amélioreront votre flux de travail de codage : Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Required<T>, NonNullable<T>, and Parameters<T>. La maîtrise de ces types d’utilitaires vous permettra d’écrire du code TypeScript plus efficace, plus efficace, plus maintenable et plus évolutif, vous permettant ainsi d’aborder des projets complexes avec facilité et précision.

Partiel

Le premier type d’utilitaire que nous allons apprendre aujourd’hui est le Partial<T> type d’utilitaire. Dans TypeScript, il est utilisé pour construire un nouveau type avec toutes les propriétés du type fourni T facultatives. Cela signifie que chaque propriété du nouveau type peut être soit du type d’origine T, soit indéfinie. Ceci est très utile dans les scénarios où nous avons de nombreux champs dans un type mais où seul un sous-ensemble de ceux-ci est requis dans certains domaines.
Exemple:

type Person = {
name: string;
age: number;
gender: string;
};

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = {
name: "Alice",
age: 30
// gender property is optional in PartialPerson type
}; 

partialPerson.age = 18; // Valid
partialPerson.gender = "Male"; // Valid

const emptyPartialPerson: PartialPerson = {}; // Valid

Dans l’exemple ci-dessus, le Partial<Person> Le type est créé à partir du type Personne, ce qui rend facultatives toutes les propriétés requises de Personne. Cela permet une certaine flexibilité lorsque vous travaillez avec des objets de type PartialPerson, car vous pouvez choisir les propriétés à inclure ou à mettre à jour. Vous pouvez penser à un cas d’utilisation dans lequel vous mettez à jour un profil utilisateur sur le backend mais souhaitez uniquement mettre à jour les champs envoyés par le frontend. Dans ce cas, vous souhaiterez peut-être toujours valider les propriétés d’un utilisateur valide, mais vous n’aurez pas besoin de définir toutes les propriétés.

Choisir

Le type d’utilitaire Pick, comme son nom l’indique, est un type d’utilitaire dans TypeScript utilisé pour sélectionner un sous-ensemble de propriétés K à partir d’un autre type T. Ce type d’utilitaire vous permet de créer un nouveau type en sélectionnant des propriétés spécifiques dans un type existant.
Exemple:

type Car = {
  make: string;
  model: string;
  price: number;
  color: string;
}; type CarInfo = Pick<Car, 'make' | 'model' | 'price'>; const carInfo: CarInfo = { make: "Ford", model: "EcoSport", price: 902020 // color property is not included };

Dans l’exemple ci-dessus, le type Pick est utilisé pour extraire sélectivement les propriétés souhaitées (marque, modèle et prix) du type Car, ce qui donne lieu à un nouveau type qui comprend uniquement les propriétés choisies. Cela vous permet de travailler avec des objets qui possèdent un sous-ensemble de propriétés du type d’origine. Dans des scénarios pratiques, vous pouvez rencontrer de grandes interfaces avec de nombreuses propriétés, et le type Pick vous permet de sélectionner les propriétés pertinentes en fonction de vos besoins spécifiques.

Omettre

Le type d’utilitaire Omit dans TypeScript est l’un de mes favoris, et je l’utilise lorsque je n’ai pas de données complètes avec moi. Par conséquent, il est utile lorsque nous devons supprimer certaines propriétés K d’un autre type T. Ce type utilitaire vous permet de créer un nouveau type en omettant des propriétés spécifiques d’un type existant.
Exemple:

type User = {
id: number;
name: string;
email: string;
mobile: string;
isVerified: boolean;
isAdmin: boolean;
};

type PublicUser = Omit<User, 'id' | 'isAdmin' | 'isVerified'>;

const publicUser: PublicUser = {
name: "Alice",
email: "alice@example.com",
mobile: "0123456789"
// id, verified and isAdmin properties are excluded
};

Dans l’exemple ci-dessus, le Omit<User, 'id' | 'isAdmin' | 'isVerified'> Le type est créé pour exclure des propriétés spécifiques (id, isAdmin et isVerified) du type User. Ceci est utile dans les cas où nous ne souhaitons pas exposer certaines données privées. Lorsque vous travaillez sur une application backend, cela aide beaucoup à supprimer les champs réservés aux administrateurs avant de renvoyer la réponse au frontend. Le type PublicUser contient désormais toutes les propriétés du type User à l’exception des propriétés exclues, ce qui vous permet de travailler avec des objets possédant un sous-ensemble de propriétés du type d’origine. Alors commencez à utiliser Omit<T, K> chaque fois que vous estimez que vous ne devriez pas exposer certains champs secrets au frontend ou à d’autres parties de votre application.

Lecture seule

Dans une grande application, nous pourrions être confrontés à une situation dans laquelle nous finirions par modifier certains champs, ce que nous ne devrions pas faire. Bien qu’il existe plusieurs façons de résoudre cette mutation accidentelle des propriétés, l’une d’entre elles consiste à utiliser le Readonly<T> type d’utilitaire dans TypeScript. Il est utilisé pour construire un type où toutes les propriétés du type T fourni sont en lecture seule. Cela signifie qu’une fois qu’un objet de type Readonly<T> est créé, ses propriétés ne peuvent pas être réaffectées.
Exemple:

type MutableUser = {
name: string;
email: string;
};

type ReadOnlyUser = Readonly<MutableUser>;

const readOnlyUser: ReadOnlyUser = {
name: "Bob",
email: "example@example.com"
};

// readOnlyUser.name = "Alpha"; // Error
console.log(readOnlyUser.name); // Output: Bob

Dans cet exemple, le Readonly<MutableUser> type est créé pour rendre toutes les propriétés du type MutableUser en lecture seule dans le type ReadOnlyUser. Une fois qu’un objet de type ReadOnlyUser est créé, ses propriétés ne peuvent pas être modifiées ou réaffectées. Le Readonly<T> Le type d’utilitaire est utile lorsque vous souhaitez créer des objets immuables dans TypeScript, garantissant que certaines propriétés ne peuvent pas être modifiées après l’initialisation. Il contribue à renforcer l’immuabilité et peut être particulièrement bénéfique dans les scénarios où l’intégrité et la cohérence des données sont essentielles.

Obligatoire

Le type d’utilitaire Required dans TypeScript est utilisé pour construire un type où toutes les propriétés du type T fourni sont requises. Cela signifie que toutes les propriétés du nouveau type doivent être fournies lors de la création d’un objet de ce type.

Exemple:

type PartialUser = {
name?: string;
email?: string;
};

type RequiredUser = Required<PartialUser>;

const requiredUser: RequiredUser = {
name: "Alice",
email: "example@example.com"
// Both name and email properties are required
}; 

Dans cet exemple, le Required<PartialUser> type est créé pour rendre toutes les propriétés du type PartialUser requises dans le type RequiredUser. Lors de la création d’un objet de type RequiredUser, toutes les propriétés doivent être fournies pour satisfaire la définition du type. Le type d’utilitaire Required est utile lorsque vous souhaitez imposer que toutes les propriétés d’un type soient obligatoires, garantissant que certaines propriétés ne peuvent pas rester indéfinies lors de la création d’objets. Un cas d’utilisation spécifique est lorsqu’un utilisateur s’inscrit sur votre plateforme, vous demandez un minimum d’informations, mais lorsqu’il vérifie son e-mail et son mobile, confirmant qu’il est un utilisateur réel, puis rend d’autres champs obligatoires.

Le NonNullable<T> Le type d’utilitaire dans TypeScript est utilisé pour construire un type en excluant null et non défini du type T fourni. Ce type d’utilitaire garantit que le type résultant n’inclut pas null ou non défini comme valeurs possibles pour ses propriétés.
Exemple:

type SecondaryUser = {
name: string | null;
email: string | undefined;
};

type NonNullableUser = NonNullable<SecondaryUser>;

const nonNullableUser: NonNullableUser = {
name: "Alice",
email: "example@example.com"
// Null and undefined are excluded
};

Dans cet exemple, le NonNullable<User> Le type est créé pour exclure null et undefined des propriétés du type User, ce qui donne le type NonNullableUser. Les objets de type NonNullableUser n’autoriseront pas null ou non défini comme valeurs valides pour leurs propriétés. Le NonNullable<T> Le type d’utilitaire est utile dans les cas où vous souhaitez vous assurer que l’objet n’a pas de propriétés nulles ou non définies. Il permet d’éviter les erreurs d’exécution potentielles causées par des valeurs nulles ou non définies inattendues dans le code TypeScript.

Paramètres

Le dernier type d’utilitaire que nous allons explorer est le type Parameters, qui vous permet d’extraire les types de paramètres d’un type de fonction T donné et de les représenter sous la forme d’un type de tuple dans TypeScript.
Exemple:

type AddNumberFunction = (a: number, b: number) => number;

type AddNumberFunctionParams = Parameters<AddNumberFunction>; // Result: [number, number]

const parameters: AddNumberFunctionParams = [5, 10]; // Valid
// const wrongParams: AddNumberFunctionParams = ['a', 'b']; // Invalid

Dans cet exemple, le type AddNumberFunction représente une fonction qui prend deux paramètres de type number et renvoie un nombre. Alors quand nous le faisons Parameters<AddNumberFunction>nous extrayons les types de paramètres du type AddNumberFunction sous forme de tuple [number, number]. Cela nous permet d’accéder aux types de paramètres individuels et de les utiliser en conséquence. Dans les scénarios où vous souhaitez vérifier dynamiquement les types, la validation ou la manipulation des paramètres de fonction, utilisez l’option Parameters<T> type d’utilitaire.

Conclusion

Les types d’utilitaires TypeScript offrent un large éventail d’avantages aux développeurs, de la création de propriétés facultatives à l’extraction de types de paramètres. En comprenant et en utilisant ces types d’utilitaires, les développeurs peuvent écrire un code plus robuste, flexible et maintenable. Que vous travailliez sur un petit projet ou une application à grande échelle, l’intégration de types d’utilitaires TypeScript dans votre flux de travail peut aider à détecter les erreurs plus tôt, à éliminer les possibilités de certains bogues, à améliorer la lisibilité du code et à garantir la sécurité des types. Avec de la pratique et de l’expérience, vous maîtriserez l’utilisation de ces types d’utilitaires pour relever des défis de frappe complexes et faire passer vos compétences TypeScript au niveau supérieur.