Les génériques de typeScript permettent un code réutilisable et sécurisé en permettant aux fonctions, aux interfaces et aux composants de fonctionner avec plusieurs types tout en préservant les informations de type. 1. Les génériques utilisent des variables de type comme T pour représenter les types d'espaces d'espaces d'espaces réservés, comme le montre la fonction d'identité, la préservation de la sécurité de type contrairement à tout. 2. Ils sont idéaux pour des structures comme APIRSPONSE , permettant une gestion cohérente des formes de données variables entre les API ou les gestionnaires d'état. 3. En utilisant les étendues, les génériques peuvent être limités pour garantir les propriétés requises, telles que T étend {id: numéro} pour les objets avec un champ d'ID. 4. Les paramètres de type multiple (par exemple, K, V, R) prennent en charge les transformations complexes comme MapObject, et les types par défaut (par exemple, t = inconnus) améliorent l'utilisabilité sans sacrifier la flexibilité. 5. Les génériques sont largement utilisés dans les fonctions utilitaires, les crochets réagiss comme useFetch () et la gestion des états pour éviter la duplication et assurer la sécurité du temps de compilation, ce qui les rend essentiels pour un code évolutif et maintenable lorsque la logique se répète entre différents types.

Les génériques dactylographiques sont l'une des fonctionnalités les plus puissantes pour l'écriture de code réutilisable et sécurisé. Ils vous permettent de créer des composants, des fonctions ou des classes qui fonctionnent sur une variété de types plut?t qu'un seul - sans sacrifier les informations de type. Cela débloque la flexibilité tout en maintenant un dactylographie solide, ce qui est essentiel dans les applications à grande échelle.

Décomposons comment les génériques vous aident à créer un code plus réutilisable et quand les utiliser.

1. Que sont les génériques? (Et pourquoi vous en avez besoin)

à la base, les génériques vous permettent d'écrire des fonctions ou des structures de données qui peuvent gérer différents types tout en préservant la sécurité des types.

Par exemple, imaginez une fonction d'identité simple:

 identité de fonction (arg: any): tout {
  retourner arg;
}

Cela fonctionne, mais il jette les informations de type. Avec des génériques, vous le préserve:

 Identité de fonction <T> (arg: t): t {
  retourner arg;
}

Ici, T est une variable de type - un espace réservé pour le type qui sera utilisé lorsque la fonction est appelée.

Vous pouvez l'appeler comme ceci:

 Conn num = identité (42); // Type: numéro
const str = identity ("hello"); // Type: cha?ne

TypeScript s'enfère automatiquement T , vous n'avez donc pas toujours à écrire identity<number>(42) .

Cela peut sembler trivial, mais cela devient critique lors de la construction de services publics comme des caches, des API ou des gestionnaires d'état où les types varient, mais le comportement reste cohérent.

2. Utilisation de génériques dans les fonctions et les interfaces

Les génériques brillent vraiment lors de l'abstraction de la logique sur plusieurs types.

Exemple: un emballage générique de réponse API

Supposons que vous gérez les réponses API avec une forme cohérente:

 interface apirsonse <t> {
  Données: T;
  Statut: numéro;
  Message ?: String;
}

Vous pouvez maintenant réutiliser cette interface sur différents points de terminaison:

 const userResponse: apiResponse <User> = {
  Données: {id: 1, nom: "Alice"},
  Statut: 200,
};

const PostResponse: apiResponse <post []> = {
  Données: [{id: 1, titre: "Hello"}],
  Statut: 200,
};

Vos composants ou services peuvent désormais gérer ApiResponse<T> sans conna?tre la forme exacte de T , tout en offrant une assurance automatique complète et une vérification de type.

3. Contrain les génériques avec extends

Parfois, vous voulez de la flexibilité, mais pas trop . Vous pouvez restreindre les types qu'un générique accepte en utilisant extends .

Par exemple, supposons que vous souhaitiez une fonction qui extrait une propriété d'un objet, mais seulement si elle a un champ id :

 Fonction Logid <T étend {id: numéro}> (item: t): void {
  console.log (item.id);
}

Maintenant, cela garantit que tout argument adopté doit avoir un id de number de type:

 logId ({id: 123, nom: "bob"}); // ? ok
LogID ({nom: "Charlie"}); // ? Erreur: ?ID? manquant

Ce schéma est commun dans les fonctions utilitaires, les gestionnaires de formulaires ou les sérialiseurs où vous avez besoin de garanties structurelles.

4. Paramètres de type multiple et types par défaut

Vous n'êtes pas limité à un type générique.

 fonction mapObject <k, v, r> (
  obj: enregistrement <k, v>,
  fn: (valeur: v) => r
): Enregistrer <k, r> {
  return object.fromentries (
    Object.entries (obj) .map (([clé, valeur]) => [key, fn (valeur)])
  ) comme enregistrement <k, r>;
}

Vous pouvez également fournir des types par défaut pour une meilleure ergonomie:

 Interface QueryResult <t = inconnu> {
  Données: T;
  Chargement: booléen;
}

Maintenant, QueryResult est par défaut unknown si aucun type n'est spécifié, mais reste flexible.

5. Composants réutilisables dans la pratique

Les génériques sont particulièrement utiles dans:

• Fonctions utilitaires (par exemple, pick , omit , deepClone )
• Gestion de l'état (par exemple, actions, réducteurs avec les types de charge utile)
• React Composants (par exemple, formulaires, modaux qui acceptent les accessoires génériques)
• Données Rending Hooks (par exemple, useFetch<T>() )

Exemple: un crochet de réaction générique

 fonction usefetch <T> (URL: String): {data: t | nul; Chargement: booléen} {
  const [data, setData] = useState <t | null> (null);
  const [chargement, setLoading] = useState (true);

  useEFFECT (() => {
    Fetch (URL)
      .Then (r => r.json ())
      .Then (data => setData (données comme t))
      .Finally (() => setLoading (false));
  }, [url]);

  return {data, chargement};
}

// utilisation
const {data} = usefetch <user []> ("/ api / utilisateurs");

Ici, le même crochet gère en toute sécurité tout type de réponse attendu.

Les génériques peuvent sembler abstraits au début, mais ils ne sont que la manière de TypeScript de vous permettre d'écrire du code à l'épreuve du futur . Une fois que vous commencerez à les utiliser, vous vous retrouverez à dupliquer moins, à refactoriser avec confiance et à attraper des bugs au moment de la compilation.

Fondamentalement: si vous répétez la même logique pour différents types, il est temps d'atteindre les génériques.

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!