Leçons du module (2/2)
Déclarations et Merging
Les fichiers de déclaration de type (avec l'extension .d.ts) sont utilisés dans TypeScript pour décrire la forme du code JavaScript existant sans implémenter de logique réelle. Ils ne contiennent que des définitions de types, d'interfaces et de signatures de fonctions.
Ces fichiers sont fondamentaux lorsque nous utilisons des bibliothèques tierces écrites en JavaScript pur.
Declaration Merging (Fusion des Déclarations)
Le Declaration Merging est un comportement dans lequel le compilateur fusionne deux ou plusieurs définitions distinctes portant le même nom en une seule définition.
Le cas le plus courant est la fusion d'interfaces :
interface User {
name: string;
}
interface User {
age: number;
}
// L'interface résultante User possède à la fois name et age !
const student: User = {
name: 'Alice',
age: 23,
};Si les propriétés ont le même nom, elles doivent être du même type, sinon TypeScript signalera une erreur.
Modifier les modules globaux et externes
Nous pouvons utiliser la fusion de déclarations pour étendre des interfaces définies dans d'autres modules ou dans la portée globale.
Par exemple, si nous voulons ajouter une propriété à l'objet global window du navigateur :
declare global {
interface Window {
analyticsToken: string;
}
}En utilisant declare global, nous indiquons à TypeScript que nous insérons une nouvelle signature dans l'interface Window existant déjà au niveau global.
À vous de jouer
Exercice 1 : Fusion de déclarations de base
Dans TypeScript, les interfaces portant le même nom dans la même portée sont fusionnées automatiquement. Déclarez une interface User avec la propriété name: string, puis dans un second bloc, déclarez la même interface User en ajoutant la propriété age: number. Déclarez enfin une constante user de type User avec des valeurs appropriées.
Afficher l'indice
Déclarez deux fois interface User en insérant les propriétés respectives, puis affectez les champs à l'objet user.
Solution disponible après 3 tentatives
Exercice 2 : Extension de l'interface globale Window
Imaginez que vous souhaitiez étendre l'interface globale Window pour y ajouter une propriété personnalisée nommée config de type Record<string, string>. Écrivez la déclaration correcte en utilisant declare global pour fusionner la nouvelle propriété dans l'interface globale Window.
Afficher l'indice
Utilisez declare global { interface Window { config: Record<string, string>; } }.
Solution disponible après 3 tentatives