Cours TypeScript : typer son code JavaScript avec confiance
TypeScript est un cours de niveau intermédiaire de 5 leçons (environ 2 h 29), avec 15 exercices et 15 questions de quiz. Prérequis : JavaScript asynchrone (promesses, fetch, API). Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 5 leçons
- 2 h 29
- 15 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous fait passer de JavaScript à TypeScript pour écrire un code plus fiable et plus facile à maintenir. Vous apprendrez à décrire vos données avec des interfaces et des unions, à écrire des fonctions génériques, à modéliser des états avec des unions discriminées et à valider les données externes à l'exécution. Les exercices combinent code TypeScript vérifié par le compilateur et logique JavaScript testée automatiquement.
Ce que tu sauras faire
- Configurer un projet TypeScript en mode strict et comprendre ce que fait le compilateur
- Décrire des données avec interfaces, alias, unions de littéraux et propriétés facultatives
- Écrire des fonctions et des types génériques contraints avec extends et keyof
- Modéliser des états et des actions avec des unions discriminées vérifiées par never
- Dériver des types avec Partial, Pick, Omit, Record, as const et satisfies
- Valider les données externes avec des gardes de type et écrire un client fetch typé
Programme des 5 leçons
- Expliquer ce qu'apporte TypeScript par rapport à JavaScript
- Annoter variables, paramètres et valeurs de retour avec les types de base
- S'appuyer sur l'inférence et comprendre le mode strict
Types primitifs TypeScriptInférence de typesMode strict et tsconfig
- 02
Objets, interfaces, unions et rétrécissement
- Décrire la forme d'un objet avec interface ou type
- Utiliser propriétés facultatives et readonly
- Combiner des types avec les unions et les rétrécir (narrowing)
Interfaces et alias de typesUnions et types littérauxRétrécissement de types
- 03
Fonctions typées et génériques
- Typer paramètres, retours, callbacks et paramètres facultatifs
- Écrire des fonctions génériques réutilisables
- Contraindre un générique avec extends et keyof
- 04
Unions discriminées et types utilitaires
- Modéliser des états avec des unions discriminées
- Garantir l'exhaustivité d'un switch avec never
- Dériver des types avec Partial, Pick, Omit, Record, ReturnType et as const
- 05
Typer le DOM et les données d'API
- Manipuler le DOM de façon typée (querySelector, événements)
- Valider à l'exécution des données externes avec des gardes de type
- Écrire un client fetch générique et sûr
Projet final
Client d'API typé pour un mini-gestionnaire de tâches
Migrez en TypeScript strict un petit gestionnaire de tâches écrit en JavaScript. Modélisez les tâches et les actions de l'interface avec des unions discriminées, dérivez les types de création et de mise à jour avec les types utilitaires, et écrivez un client d'API générique qui valide chaque réponse avant de l'exposer au reste de l'application. Le DOM est manipulé sans assertion non nulle.
Livrables
- Un tsconfig.json en mode strict et un code qui passe tsc --noEmit sans erreur
- Les types Tache, TacheCreation, TacheMaj et l'union Action, avec un reducer exhaustif vérifié par never
- Un module api.ts exposant chargerJSON<T> et des gardes de type pour chaque ressource
- Une interface DOM typée (formulaire d'ajout, liste, filtres) sans any ni opérateur !
- Des tests de la logique pure (reducer, validateurs)
Critères d'évaluation
- Absence de any explicite ou implicite
- États impossibles rendus irreprésentables par les types
- Les données externes sont reçues en unknown et validées
- Les types dérivés suivent automatiquement le modèle de base
- Lisibilité : annotations aux frontières, inférence ailleurs
Questions fréquentes
Faut-il bien connaître JavaScript avant d'apprendre TypeScript ?
Oui. TypeScript ajoute des types à JavaScript sans changer son fonctionnement. Ce cours suppose que vous maîtrisez les fonctions, les objets, les tableaux et l'asynchrone (promesses, async/await).
TypeScript vérifie-t-il les données à l'exécution ?
Non. Les types sont vérifiés à la compilation puis effacés. Pour les données externes (API, formulaires, stockage local), il faut les valider à l'exécution avec des gardes de type ou une bibliothèque de schémas, ce que le cours enseigne.
Interface ou type : lequel choisir ?
Pour décrire un objet, les deux conviennent. type est nécessaire pour les unions et les alias de types primitifs ; interface peut être étendue et fusionnée. L'essentiel est d'adopter une convention cohérente dans le projet.
Ce cours est-il à jour avec les dernières versions de TypeScript ?
Oui. Il utilise TypeScript 7, le compilateur natif : même commande tsc, mode strict par défaut et options obsolètes supprimées. Les notions du langage (dont satisfies) restent valables avec les versions 5 et 6 que vous croiserez dans des projets existants.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « TypeScript » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.