Maîtriser le système de types fondamentaux de TypeScript

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 NaN et Infinity.
  • string : Chaînes de caractères classiques ou templates literals.
  • boolean : Valeurs logiques true ou false.
  • 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; }

Étiquettes: TypeScript StaticTyping JavaScript FrontendDevelopment WebArchitecture

Publié le 6 juin à 23h05