Le système de types de TypeScript constitue le socle de la robustesse des applications modernes développées en JavaScript. En introduisant des contraintes statiques, il permet d'identifier les erreurs dès la phase de développement. Explorons les types essentiels et les mécanismes de typage offerts par le langage.
Annotations de type
L'annotation de type est la syntaxe de base consistant à ajouter deux-points : après une variable pour définir sa nature. Cela permet de contraindre les valeurs assignables.
let scoreJoueur: number = 42;
let pseudo: string = "Neo";
let estActif: boolean = true;
Types Primitifs
TypeScript prend en charge l'intégralité des types primitifs de JavaScript, complétés par des fonctionnalités modernes :
- number : Gère les entiers, les flottants, ainsi que
NaNetInfinity. - string : Chaînes de caractères classiques ou templates literals.
- boolean : Valeurs logiques
trueoufalse. - null et undefined : Types correspondant à leurs valeurs respectives.
- symbol et bigint : Pour les identifiants uniques et les entiers de grande précision.
Gestion des Tableaux
Il existe deux syntaxes pour définir des listes d'éléments de même type. On peut également créer des tableaux immuables.
// Syntaxe standard
const scores: number[] = [10, 20, 30];
// Syntaxe générique
const tags: Array<string> = ["web", "dev"];
// Tableau en lecture seule
const config: readonly string[] = ["PROD", "STAGING"];
// Tableaux mixtes via l'union
const identifiants: (number | string)[] = [1, "admin", 2];
Alias de type (type)
Les alias permettent de créer un nom personnalisé pour une structure de type complexe, favorisant ainsi la réutilisation du code.
type IdentifiantUnique = number | string;
type Client = {
nom: string;
id: IdentifiantUnique;
};
let nouveauClient: Client = { nom: "Alice", id: "A123" };
Typage des Fonctions
Le typage d'une fonction englobe ses paramètres (obligatoires ou non) et sa valeur de retour.
Paramètres et retour
function calculerTotal(prix: number, tva: number = 0.2): number {
return prix * (1 + tva);
}
// Paramètre optionnel
function notifier(message: string, delai?: number): void {
console.log(message);
}
Void et Never
Le type void indique qu'une fonction ne retourne rien de significatif (undefined), tandis que never est utilisé pour les fonctions qui ne se terminent jamais (boucles infinies ou erreurs levées).
const afficherMessage = (msg: string): void => console.log(msg);
const genererErreur = (code: string): never => {
throw new Error(`Erreur fatale : ${code}`);
};
Structures d'Objets et Interfaces
TypeScript permet de décrire précisément la forme des objets, incluant les propriétés facultatives.
interface Vehicule {
marque: string;
modele: string;
annee?: number; // Propriété optionnelle
}
const maVoiture: Vehicule = {
marque: "Tesla",
modele: "Model 3"
};
Extension d'Interfaces
L'héritage d'interface permet de composer des structures complexes à partir de briques de base.
interface Point2D {
x: number;
y: number;
}
interface Point3D extends Point2D {
z: number;
}
Tuples
Un tuple est un tableau de longueur fixe dont chaque position possède un type spécifique.
let coordonnees: [number, number] = [48.8566, 2.3522];
let reponseApi: [string, boolean] = ["Succès", true];
Inférence et Assertion de type
TypeScript est capable de deviner le type d'une variable lors de son initialisation sans intervention explicite (inférence). À l'inverse, l'assertion de type est utilisée lorsque le développeur dispose de plus d'informations que le compilateur sur un objet spécifique.
// Inférence automatique
let compteur = 10; // Déduit comme 'number'
// Assertion de type
const monChamp = document.getElementById("email_input") as HTMLInputElement;
monChamp.value = "test@example.com";
Unions et Types Littéraux
Les types littéraux restreignent une variable à des valeurs précises, souvent combinés avec des unions pour simuler des états.
type Role = "admin" | "editeur" | "lecteur";
let utilisateurActuel: Role = "editeur"; // OK
// utilisateurActuel = "root"; // Erreur : type non autorisé
Énumérations (enum)
Les enums permettent de définir un ensemble de constantes nommées, facilitant la lisibilité du code.
enum StatutCommande {
EnAttente,
Expediee,
Livree
}
let etat: StatutCommande = StatutCommande.Expediee;
Any vs Unknown
Le type any désactive toute vérification de type, ce qui est risqué. Le type unknown est une alternative plus sûre qui oblige à vérifier le type avant toute manipulation.
let donneeVariable: unknown = "Bonjour";
if (typeof donneeVariable === "string") {
console.log(donneeVariable.length); // Sécurisé après vérification
}
Opérateur typeof
L'opérateur typeof peut être utilisé dans un contexte de type pour extraire la structure d'une variable existante.
const themeConfiguration = {
primaire: "#3498db",
secondaire: "#2ecc71"
};
type ThemeType = typeof themeConfiguration;
// ThemeType équivaut à { primaire: string; secondaire: string; }