TypeScript - Types littéraux : Guide pour les débutants

Bonjour, futur superstars du codage ! Aujourd'hui, nous plongeons dans le monde passionnant des types littéraux de TypeScript. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je serai votre guide amical à travers cette aventure. À la fin de ce tutoriel, vous serez capable de manier les types littéraux comme un pro !

Qu'est-ce que les types littéraux ?

Avant de rentrer dans le vif du sujet, imaginons que vous commandez une pizza. Vous ne pouvez pas juste dire : "Je veux une pizza." Vous devez spécifier la taille : petite, moyenne ou grande. En TypeScript, les types littéraux sont comme ces tailles spécifiques de pizza - ce sont des valeurs exactes que peut prendre une variable.

Syntaxe

La syntaxe pour les types littéraux est simple. Vous utilisez simplement la valeur exacte que vous souhaitez autoriser. Jetons un coup d'œil à un exemple de base :

let pizzaSize: "small" | "medium" | "large";

Dans ce cas, pizzaSize ne peut être que "small", "medium" ou "large". Rien d'autre n'est autorisé - ni "extra large" ni "minuscule" !

Types littéraux de chaîne

Les types littéraux de chaîne sont les plus courants et les plus faciles à comprendre. Ils sont exactement ce qu'ils disent - des chaînes spécifiques que peut être une variable.

Exemple 1 : Jours de la semaine

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // C'est correct
today = "Someday"; // Erreur ! Le type '"Someday"' n'est pas assignable au type 'DayOfWeek'.

Dans cet exemple, DayOfWeek est un type qui ne peut être qu'un des sept jours de la semaine. Essayez d'assigner une autre chaîne, et TypeScript vous_indexera du doigt !

Exemple 2 : Couleurs des feux de circulation

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`Le feu est passé à ${color}`);
}

changeLight("Green"); // Ça fonctionne bien
changeLight("Purple"); // Erreur ! L'argument de type '"Purple"' n'est pas assignable au paramètre de type 'TrafficLightColor'.

Ici, nous nous assurons que notre feu de circulation ne peut changer que vers des couleurs valides. Pas de lumières disco sur cette rue !

Types littéraux numériques

Comme avec les chaînes, nous pouvons créer des types littéraux avec des nombres. C'est génial lorsque vous souhaitez restreindre une valeur à des nombres spécifiques.

Exemple 3 : Lancers de dés

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`Vous avez jeté un ${myRoll}`);

Dans cet exemple, nous nous assurons que notre dé ne peut lancer que des nombres de 1 à 6. Pas de dés truqués dans notre jeu !

Exemple 4 : Tailles de chemises

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // Erreur ! Le type '41' n'est pas assignable au type 'ShirtSize'.

Ici, nous restreignons les tailles de chemises à des nombres spécifiques. Pas de tailles intermédiaires dans ce magasin !

Types littéraux combinés

La véritable puissance des types littéraux apparaît lorsque nous combinons différents types de littéraux.

Exemple 5 : État du personnage de jeu

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // Cela est également valide
hero = "Wounded"; // Erreur ! Le type '"Wounded"' n'est pas assignable au type 'CharacterStatus'.

Dans ce jeu, un personnage peut être "Alive", "Dead", 1 (représentant vivant), ou 0 (représentant mort). C'est comme avoir à la fois une représentation texte et une représentation code !

Cas d'utilisation des types littéraux

Les types littéraux sont extrêmement utiles dans de nombreux scénarios. Explorons quelques-uns :

1. Paramètres de fonction

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// Envoyer la requête
console.log(`Envoi de la requête ${method} vers ${url}`);
}

sendRequest("https://api.example.com", "GET"); // Ça fonctionne bien
sendRequest("https://api.example.com", "FETCH"); // Erreur ! L'argument de type '"FETCH"' n'est pas assignable au paramètre de type 'HttpMethod'.

En utilisant un type littéral pour la méthode HTTP, nous nous assurons que seules les méthodes valides peuvent être utilisées.

2. Objets de configuration

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

Les types littéraux nous aident à créer des objets de configuration stricts, évitant les fautes de frappe et les paramètres invalides.

3. Machines à états

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// Logique de connexion
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

Ici, nous utilisons les types littéraux pour représenter différents états dans un processus de connexion, en nous assurant que l'état ne peut être qu'un des valeurs prédéfinies.

Tableau des méthodes

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

Méthode/Concept	Description	Exemple
Déclaration de type	Définir un nouveau type en utilisant des valeurs littérales	type DayOfWeek = "Monday" \| "Tuesday" \| ...
Assignation de variable	Assigner un type littéral à une variable	let today: DayOfWeek = "Monday";
Paramètres de fonction	Utiliser des types littéraux dans les paramètres de fonction	function sendRequest(method: HttpMethod) {...}
Littéraux combinés	Mixer différents types de littéraux	type Status = "Active" \| "Inactive" \| 0 \| 1;
Propriétés d'interface	Utiliser des types littéraux dans les propriétés d'interface	interface Config { theme: "light" \| "dark" }

Et voilà, mon apprenti codage ! Vous venez de monter en niveau dans votre parcours TypeScript en maîtrisant les types littéraux. Souvenez-vous, comme choisir le parfait topping de pizza, les types littéraux vous aident à être spécifique et à éviter les erreurs. Continuez à vous entraîner, et bientôt vous créerez du code sûr et délicieux, comme une pizza parfaitement cuite ! ??

Credits: Image by storyset