TypeScript - Types Littéraux Modèles

Bonjour à tous, futurs superstars du codage ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de TypeScript et explorer une fonctionnalité fascinante appelée Types Littéraux Modèles. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider étape par étape, comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !

Qu'est-ce que les Types Littéraux Modèles ?

Avant de rentrer dans les détails, comprenstons ce qu'est un Type Littéral Modèle. Imaginez que vous créez une carte de vœux. Vous avez un modèle de base, mais vous souhaitez le personnaliser avec différents noms et messages. C'est essentiellement ce que font les Types Littéraux Modèles dans TypeScript - ils nous permettent de créer des définitions de types flexibles et réutilisables qui peuvent changer en fonction de ce que nous entrons.

Syntaxe

La syntaxe pour les Types Littéraux Modèles peut sembler un peu étrange au départ, mais je vous promets qu'elle n'est pas aussi compliquée qu'elle en a l'air. Voici la structure de base :

type TemplateLiteralType = `prefix ${SomeType} suffix`;

Reprenons cela :

• type est un mot-clé dans TypeScript que nous utilisons pour définir un nouveau type.
• TemplateLiteralType est le nom que nous donnons à notre nouveau type (vous pouvez choisir n'importe quel nom que vous aimez).
• Les backticks (`) sont utilisés pour encadrer notre modèle.
• ${SomeType} est un placeholder où nous pouvons insérer un autre type.
• prefix et suffix sont des textes optionnels qui feront toujours partie de notre type.

Pensez-y comme un jeu de Mad Libs, où ${SomeType} est l'espace que nous remplissons pour créer différentes variantes.

Exemples

Maintenant, regardons quelques exemples pour voir comment les Types Littéraux Modèles fonctionnent en pratique. Je vais fournir plein d'exemples de code et les expliquer en détail.

Exemple 1 : Utilisation de Base

type Greeting = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // Cela est valide
let invalidGreeting: Greeting = "Hi there!"; // Cela provoquera une erreur

Dans cet exemple, nous avons créé un type Greeting qui doit toujours commencer par "Hello, " et se terminer par "!". La partie ${string} signifie que nous pouvons mettre n'importe quel string entre les deux. C'est comme avoir un modèle de carte de vœux où vous ne pouvez que changer le nom.

Exemple 2 : Combinaison de Littéraux de Chaîne

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // Cela est valide
let invalidShirt: TShirt = "tiny-yellow";  // Cela provoquera une erreur

Ici, nous créons un type TShirt en combinant deux autres types : Size et Color. Cela nous permet de créer des combinaisons valides comme "small-red" ou "large-green", mais empêche les combinaisons invalides comme "tiny-yellow".

Exemple 3 : Utilisation de Nombres

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // Cela est valide
let invalidPoint: Coordinate = "10,20,30";  // Cela provoquera une erreur

Dans cet exemple, nous utilisons number au lieu de string. Cela crée un type qui représente une coordonnée 2D. Il doit y avoir deux nombres séparés par une virgule.

Exemple 4 : Modèles Complexes

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // Cela provoquera une erreur

Cet exemple montre comment nous pouvons créer des types plus complexes. Nous définissons un type ApiRoute qui combine une méthode HTTP avec un point de terminaison. Cela garantit que nos routes API suivent toujours un format spécifique.

Exemple 5 : Modificateurs Majuscules et Minuscules

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // Cela est valide
let soft: WhisperingGreeting = "hi";   // Cela est valide
let invalid: ShoutingGreeting = "Hey"; // Cela provoquera une erreur

TypeScript fournit également des utilitaires de type comme Uppercase et Lowercase que nous pouvons utiliser avec nos Types Littéraux Modèles. Cet exemple montre comment nous pouvons créer de nouveaux types qui sont des versions majuscules ou minuscules de types existants.

Tableau des Méthodes

Voici un tableau résumant les méthodes et utilitaires clés que nous avons discutés :

Méthode/Utilitaire	Description	Exemple
Modèle de Base	Crée un type avec un prefix/suffix fixes et une partie variable	type Greeting = 'Hello, ${string}!'
Types Unions	Combine plusieurs types littéraux de chaîne	type Color = "red" | "blue" | "green"
Majuscule	Convertit un type littéral de chaîne en majuscules	type Upper = Uppercase<"hello">
Minuscule	Convertit un type littéral de chaîne en minuscules	type Lower = Lowercase<"HELLO">

Conclusion

Et voilà, mes chers étudiants ! Nous avons exploré le merveilleux monde des Types Littéraux Modèles dans TypeScript. De l'utilisation de base aux exemples plus complexes, vous avez vu comment cette fonctionnalité peut nous aider à créer des définitions de types plus précises et flexibles.

Souvenez-vous, comme pour toute nouvelle compétence, maîtriser les Types Littéraux Modèles nécessite de la pratique. Ne soyez pas découragé si cela ne vous vient pas immédiatement - j'ai vu des centaines d'étudiants avoir du mal au début, puis avoir ce moment "aha !". Continuez à expérimenter, essayez de créer vos propres types, et surtout, amusez-vous avec cela !

Dans mes années d'enseignement, j'ai découvert que les étudiants qui profitent du processus d'apprentissage sont ceux qui excellent. Alors, pensez à TypeScript comme un outil puissant dans votre boîte à outils de codage, et aux Types Littéraux Modèles comme un couteau suisse à l'intérieur de cette boîte - polyvalent, précis, et incroyablement utile une fois que vous savez comment l'utiliser.

Maintenant, allez de l'avant et créez des choses incroyables avec vos nouvelles connaissances. Et souvenez-vous, dans le monde de la programmation, la seule limite est votre imagination (et peut-être parfois votre compilateur, mais c'est une autre histoire). Bon codage !

Credits: Image by storyset