Leçons du module (2/2)
Types Littéraux et Assertions
TypeScript propose des outils avancés pour restreindre les valeurs possibles des variables et pour forcer le compilateur à reconnaître des types plus spécifiques lorsque cela est nécessaire.
Types Littéraux (Literal Types)
Un type littéral représente une valeur unique et précise (par exemple, une chaîne de caractères spécifique ou un nombre). Ils sont généralement combinés avec des unions :
type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;
light = 'red'; // OK
light = 'blue'; // Errore: "blue" non è assegnabile a TrafficLightAssertions de Type (as)
Parfois, vous disposez d'informations sur un type que TypeScript ne peut pas connaître au moment de la compilation. Dans ces cas, vous pouvez utiliser une assertion de type via le mot-clé as :
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;L'assertion dit au compilateur : "Fais-moi confiance, je sais que cet élément est un HTMLCanvasElement". Elle n'effectue aucun contrôle ni conversion (cast) à l'exécution ; elle sert uniquement à aider le vérificateur de types (type checker).
Assertions Const (as const)
Lorsque nous déclarons un objet ou un tableau avec const, TypeScript permet toujours de modifier ses propriétés internes. En ajoutant as const à la fin, toute la structure est gelée et devient en lecture seule, convertissant toutes les propriétés en leurs types littéraux exacts :
const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Errore: l'array è di sola lettura (readonly)Types de Chaînes de Modèles (Template Literal Types)
Les types littéraux de gabarits (template literal types) se basent sur les chaînes de caractères de gabarits (template strings) de JavaScript, mais sont utilisés pour définir des types. Ils permettent de combiner plusieurs types littéraux en un seul :
type Size = 'small' | 'large';
type Color = 'red' | 'blue';
// Crea l'unione: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;Utilitaires de Chaînes dans les Template Literal Types
TypeScript propose des types d'utilité spéciaux pour manipuler les caractères à l'intérieur des Template Literal Types :
Capitalize<StringType>: Met en majuscule la première lettre de la chaîne.Uncapitalize<StringType>: Met en minuscule la première lettre de la chaîne.Uppercase<StringType>: Convertit toute la chaîne en majuscules.Lowercase<StringType>: Convertit toute la chaîne en minuscules.
type ActionType = 'click' | 'hover';
// Genera: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;À toi de jouer
Exercice 1 : Union de Littéraux Direction
Définis un type littéral appelé Direction qui n'accepte que les chaînes 'up', 'down', 'left' ou 'right'. Déclare ensuite une fonction nommée move(dir: Direction): string qui retourne la chaîne 'Moving ' suivie de la direction reçue.
Afficher l'indice
Définis d'abord l'alias de type avec les quatre options séparées par |, puis déclare la fonction move en annotant le paramètre et le retour.
Solution disponible après 3 tentatives
Exercice 2 : Assertion sur JSON.parse
La fonction JSON.parse renvoie par défaut le type any. Modifie la fonction parseUser afin que le résultat de JSON.parse(json) soit affirmé comme étant de type { username: string } en utilisant le mot-clé as.
Afficher l'indice
Ajoute 'as { username: string }' immédiatement après l'appel à JSON.parse(json).
Solution disponible après 3 tentatives
Exercice 3 : Template Literal pour Événements
Étant donné les types Status et Action, définis un type littéral de gabarit appelé Event au format 'Status-Action' (par exemple, 'open-click').
Afficher l'indice
Utilise les backticks pour définir le type et la syntaxe ${Status}-${Action} à l'intérieur.
Solution disponible après 3 tentatives
Exercice 4 : Template Literal Type avec Capitalize
Définis un type littéral Event qui peut être 'click' ou 'hover'. Après cela, utilise les Template Literal Types pour déclarer un type EventHandler représentant les chaînes au format on suivi du nom de l'événement avec l'initiale en majuscule (c'est-à-dire 'onClick' ou 'onHover').
Afficher l'indice
Utilise Capitalize<Event> à l'intérieur du template literal pour mettre en majuscule la première lettre de l'événement.
Solution disponible après 3 tentatives