Maison  >  Article  >  interface Web  >  Libérer la puissance de \"as const\" de TypeScript : la fonctionnalité sous-estimée que vous devez connaître

Libérer la puissance de \"as const\" de TypeScript : la fonctionnalité sous-estimée que vous devez connaître

王林
王林original
2024-07-20 07:26:50720parcourir

Unlocking the Power of TypeScript

Lorsque nous discutons des fonctionnalités les plus sous-estimées de TypeScript, celle qui passe souvent inaperçue est l'affirmation as const. Cette fonctionnalité est incroyablement utile dans divers scénarios, offrant des avantages significatifs aux développeurs.

Comprendre "as const"

Pour commencer, définissons ce que fait const. Imaginez que vous ayez un objet comme celui-ci :

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
};

Si vous survolez les propriétés des itinéraires, vous remarquerez qu'elles sont saisies sous forme de chaîne. Par exemple, routes.home est saisi sous forme de chaîne et non de "/home". En effet, TypeScript suppose que ces propriétés peuvent changer, il les déduit donc comme des chaînes mutables.

Maintenant, considérons une fonction qui devrait accepter uniquement ces itinéraires spécifiques. Vous pouvez définir les types comme ceci :

function changeRoute(route: "home" | "profile" | "notifications") {
  // navigate to route
}

Cette approche fonctionne, mais elle est répétitive et sujette aux erreurs. Si vous ajoutez un nouvel itinéraire, vous devez mettre à jour la définition de type de la fonction, ce qui n'est pas idéal.

Rendre les objets immuables

C'est ici que as const entre en jeu. En utilisant as const, vous pouvez rendre l'objet immuable et TypeScript déduira les types littéraux au lieu d'une simple chaîne.

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
} as const;

Maintenant, routes.home est tapé comme "/home", routes.notifications comme "/notifications", et ainsi de suite. Cette immuabilité garantit que ces propriétés ne peuvent pas être modifiées et TypeScript reconnaît leurs valeurs spécifiques.

Cas d'utilisation pratique

Intégrons as const dans une fonction :

function changeRoute(route: typeof routes[keyof typeof routes]) {
  // navigate to route
}

Ici, typeof routes obtient le type de l'objet routes, et keyof typeof routes extrait les clés, ce qui donne les types exacts des valeurs de route. Cela rend la fonction adaptable à toute modification de l'objet routes sans avoir besoin de mises à jour répétitives.

Extraction de types

Un autre aspect puissant d'as const est la manière dont il permet l'extraction de types. Par exemple :

type Routes = (typeof routes)[keyof typeof routes];

Ce type de définition extrait dynamiquement les valeurs de l'objet routes, rendant la fonction plus maintenable et réduisant la redondance.

Conclusion

L'assertion as const dans TypeScript est une fonctionnalité polyvalente et puissante qui peut améliorer considérablement la sécurité des types et réduire la redondance dans votre code. En rendant les objets immuables et en permettant une inférence de type précise, cela simplifie la maintenance et l'extension des bases de code. Essayez-le et vous verrez comment il peut améliorer vos projets TypeScript !
Bon codage !

[Divulgation : cet article est un effort collaboratif, combinant mes propres idées avec l'aide de ChatGPT pour une meilleure articulation.]

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!

Déclaration:
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