Maison > interface Web > js tutoriel > le corps du texte

Libérer la puissance des types d'utilitaires dans TypeScript

Patricia Arquette
Libérer: 2024-11-11 18:44:03
original
192 Les gens l'ont consulté

Unleashing the Power of Utility Types in TypeScript

Salut, guerrier TypeScript ! ? Alors, vous êtes à fond dans TypeScript, et peut-être vous êtes-vous demandé : "Pourquoi y a-t-il autant de code uniquement pour la gestion des types ?" Ne vous inquiétez pas, vous n'êtes pas seul. Nous sommes tous ensemble dans cette aventure sauvage et typée statiquement.

Aujourd’hui, nous nous penchons sur certains des outils les plus intéressants de TypeScript, les Utility Types. Ce sont comme ces petits codes de triche dans un jeu vidéo qui vous aident à accélérer et à simplifier votre code. Alors retroussons nos manches et faisons une visite guidée amusante des types d'utilitaires les plus utiles dans TypeScript et comment ils peuvent rendre votre code beaucoup moins compliqué.

Quoi ? Plus de types.

Imaginez que vous essayez de travailler avec des types TypeScript sans tout écrire à partir de zéro (car qui a le temps pour ça ?). Les types utilitaires vous permettent de créer de nouveaux types en transformant ou en réutilisant des parties d'autres types. Considérez-les comme ces gadgets de cuisine sophistiqués qui tranchent et coupent en dés sans aucun effort supplémentaire. Ils font gagner du temps, réduisent la redondance et rendent votre code beaucoup plus facile à gérer. Décomposons-les un par un !

Partiel

Ce qu'il fait : Rend toutes les propriétés d'un type facultatives. Ouais, c'est aussi simple que cela.

Pourquoi vous allez l'adorer : Parfait pour les moments où vous avez besoin d'une partie d'un objet, mais pas de la totalité.

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

Copier après la connexion
Copier après la connexion

Obligatoire

Ce qu'il fait : Rend toutes les propriétés d'un type obligatoires. La petite façon de TypeScript de dire : « Ne sautez aucun champ ! »

Pourquoi vous allez l'adorer : Parfois, l'option facultative n'est tout simplement pas une option. Vous avez besoin de tout verrouillé et chargé, surtout si certaines propriétés étaient facultatives auparavant.

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!
Copier après la connexion
Copier après la connexion

Enregistrer

Ce qu'il fait : Crée un type d'objet avec les clés Clés et valeurs Type. Considérez-le comme la fonctionnalité « créez votre propre dictionnaire » de TypeScript.

Pourquoi vous allez l'adorert : Ce type est votre meilleur ami lorsque vous souhaitez un moyen rapide et facile de cartographier les données, surtout si vous connaissez les clés à l'avance.

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};
Copier après la connexion
Copier après la connexion

Choisir

Ce qu'il fait : prend un type existant et sélectionne uniquement les propriétés que vous spécifiez. Considérez-le comme une manière de TypeScript de dire : « Gardons cela court et agréable. »

Pourquoi vous allez l'adorer : Parfait pour créer des sous-ensembles d'un type existant sans tout traîner, et parce que c'est l'un de mes favoris.

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserPreview = Pick<User, "id" | "name">;
Copier après la connexion

Omettre

Ce qu'il fait : C'est le contraire de Pick. Il vous permet d'exclure des propriétés spécifiques d'un type.

Pourquoi vous allez l'adorer : Idéal quand vous avez un type, mais il y a juste un champ embêtant dont vous ne voulez pas.

type User = {
  id: number;
  name: string;
  email: string;
};

function updateUser(id: number, newValues: Partial<User>) {
  // Update only the properties you need, no need to bring everything.
}

updateUser(1, { name: "Ash" }); // Only updating name, thanks to Partial!

Copier après la connexion
Copier après la connexion

Exclure

Ce qu'il fait : Supprime certains types d'une union. C'est le « coup d'envoi du chat de groupe » de TypeScript.

Pourquoi vous allez l'adorer : C'est très utile lorsque vous avez un grand syndicat mais que vous n'avez besoin de gérer que certains cas.

type UserWithOptionalFields = {
  id: number;
  name?: string;
  email?: string;
};

const user: Required<UserWithOptionalFields> = {
  id: 1,
  name: "John",
  email: "john@example.com",
}; // All properties are now required!
Copier après la connexion
Copier après la connexion

Extraire

Ce qu'il fait : Le frère jumeau d'Exclude, Extract ne conserve que les types qui correspondent à une union donnée.

Pourquoi vous allez l'adorer : ce type restreint un type d'union aux seules pièces pertinentes.

type Role = "admin" | "user" | "guest";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"],
};
Copier après la connexion
Copier après la connexion

Et voilà ! ? Bien qu'Extract et Pick puissent se ressembler, ils sont particulièrement adaptés à différentes tâches : Extract est votre filtre pour les types d'union, tandis que Picklets vous permet de sélectionner les propriétés des types d'objets. Il en va de même pour leurs homologues, Exclure et Omettre.

Ces types d'utilitaires sont petits mais puissants ! Ils permettent de gagner du temps, de réduire la redondance du code et de garder les choses en ordre. Alors la prochaine fois que vous aurez affaire à des types, souvenez-vous de ces aides. Ils seront là pour simplifier votre parcours TypeScript et le rendre un peu plus amusant. Bon codage, et que vos types soient toujours exactement ce dont vous avez besoin ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal