En bref
Voici 10 exercices de TypeScript avec leur piste de correction — et un parti pris : on n’y refait pas FizzBuzz. TypeScript s’apprend en typant du code, la série est donc construite en deux temps : d’abord apprivoiser le compilateur sur des cas ciblés (chasse à l’inférence, fonctions typées, erreurs de type provoquées volontairement pour apprendre à les lire, unions et narrowing, interface Contact, propriétés optionnelles), puis convertir de vrais programmes JavaScript existants — le compteur de clics, la liste de courses avec son DOM typé et ses null à apprivoiser, la modélisation d’un quiz par ses types, et enfin le blindage complet en mode strict, zéro any. C’est l’exercice roi : migrer du code qu’on a soi-même écrit révèle, ligne après ligne, ce que le typage apporte. Terrain de jeu recommandé : le Playground officiel, vérifications en direct incluses.
On n’apprend pas TypeScript en résolvant des énigmes d’algorithmique — ta logique JavaScript les résout déjà. On l’apprend en typant du code : le sien, de préférence. Ces 10 exercices de TypeScript suivent la progression de nos bases du TypeScript et culminent sur la conversion de programmes issus de nos exercices de JavaScript — la boucle parfaite du parcours apprendre le TypeScript. Playground ouvert, on démarre.
Exercices 1 à 5 : apprivoiser le compilateur
- La chasse à l’inférence. Déclare dix variables JavaScript ordinaires (textes, nombres, booléens, un tableau), puis survole chacune dans le Playground pour lire le type que TypeScript a déduit — avant de deviner toi-même le prochain. Piste : aucune annotation à écrire, tout l’exercice est dans l’observation : l’inférence travaille déjà, ton rôle est d’apprendre à lui faire confiance.
- La fonction sous contrat. Écris convertisEnDollars(montant, taux) entièrement typée : paramètres number, retour number. Piste : les deux-points aux trois endroits — puis appelle-la avec du texte et savoure le refus : tu viens de désamorcer, à l’écriture, un bug qui aurait attendu l’exécution en JavaScript.
- Les erreurs volontaires. Provoque exprès cinq erreurs de type — mauvais argument, propriété inventée, oubli de paramètre, réaffectation d’un autre type, méthode de chaîne sur un nombre — et lis chaque message en entier. Piste : les diagnostics TypeScript sont rédigés en phrases (« Type ‘string’ is not assignable to type ‘number’ ») : apprendre à les lire maintenant, au calme, c’est ne plus jamais les subir en situation.
- L’union et le rétrécissement. Une fonction afficheIdentifiant(id: string | number) qui met les chaînes en majuscules et formate les nombres. Piste : un typeof dans un if — et observe dans le Playground le type de id changer d’une branche à l’autre : le narrowing en action, le compilateur qui suit ta logique conditionnelle pas à pas.
- L’interface Contact. Décris interface Contact (nom, ville, email), crée un tableau typé de trois contacts, écris une fonction qui les affiche. Piste : Contact[] pour le tableau — puis glisse volontairement une faute de frappe dans une propriété et regarde le filet la stopper net : c’est exactement le bug qui coûtait une soirée.
Exercices 6 à 10 : convertir du vrai code
- L’optionnel apprivoisé. Ajoute telephone?: string à ton interface Contact, puis écris l’affichage qui gère proprement son absence. Piste : TypeScript refuse l’accès direct — c’est voulu : un if de présence ou l’opérateur ?. règlent la question, et le réflexe anti-undefined est installé pour la vie.
- Le compteur converti. Reprends le compteur de clics de nos exercices JavaScript et migre-le en TypeScript. Piste : la surprise t’attend au querySelector : son résultat peut être null, et le mode strict te force à le dire — un if de garde ou une assertion réfléchie, et ton premier DOM typé est debout.
- La liste blindée. Convertis la liste de courses dynamique : champ, bouton, tableau de chaînes, affichage. Piste : type le tableau (string[]), les éléments du DOM (HTMLInputElement pour lire .value — le type précis débloque la bonne autocomplétion), et chaque écouteur d’événement. À la fin, compare avec ta version JS : même comportement, zéro zone d’ombre.
- Le quiz modélisé. Avant tout code : conçois les types d’un mini quiz — interface Question (intitulé, choix, index de la bonne réponse), type Resultat — puis seulement la logique qui les utilise. Piste : c’est la démarche TypeScript par excellence, penser les formes de données d’abord ; remarque comme la fonction de correction s’écrit presque toute seule une fois les types posés.
- Le blindage final. Assemble le quiz complet (questions, score, affichage DOM) en mode strict, avec un objectif chiffré : zéro any. Piste : chaque any qui te tente cache un type que tu n’as pas encore nommé — nomme-le. Réussi ? Tu écris désormais le TypeScript qu’on attend en entreprise, et tes projets à venir partiront blindés d’origine.
La méthode : le compilateur comme partenaire de relecture
Trois habitudes maximisent le rendement de la série. Lis les erreurs comme des phrases — car c’en est : TypeScript explique ce qu’il attendait, ce qu’il a reçu, et où ; l’exercice 3 t’a entraîné exactement pour ça, et ce réflexe de lecture est la moitié de la compétence. Survole tout : dans le Playground comme dans l’éditeur, le type de chaque expression s’affiche au survol — c’est ta radiographie permanente du code, utilise-la à chaque doute plutôt que de deviner. Convertis ton propre code : la seconde moitié de la série vaut dix tutoriels précisément parce que tu connais déjà le comportement attendu — chaque annotation devient alors une découverte sur du terrain familier, pas une règle abstraite. Prolonge la logique : tout programme JavaScript que tu as écrit un jour est un exercice TypeScript qui t’attend.
La suite coule de source : tes prochains projets démarrent directement en TypeScript strict — le réflexe est pris —, et le langage t’accompagnera naturellement vers React ou Node, où il est devenu la langue maternelle. Pour l’entraînement continu, les sites d’exercices gratuits acceptent presque tous les réponses en TypeScript — autant y prendre l’habitude d’y répondre typé : c’est gratuit, et ça compte double.
Questions fréquentes
Quels exercices pour apprendre TypeScript efficacement ?
Deux temps : d’abord des cas ciblés sur le compilateur — observer l’inférence, typer des fonctions, provoquer et lire des erreurs, manier unions et interfaces — puis la conversion de petits programmes JavaScript existants (compteur, liste dynamique, quiz) jusqu’au mode strict sans any. La migration de son propre code est l’exercice le plus formateur.
Pourquoi provoquer volontairement des erreurs de type ?
Parce que les diagnostics TypeScript sont le cœur de l’outil : rédigés en phrases, ils disent ce qui était attendu, ce qui a été reçu et où. Les déclencher au calme apprend à les lire en dix secondes — et transforme le compilateur en partenaire de relecture plutôt qu’en obstacle.
Comment typer les éléments du DOM en TypeScript ?
En deux gestes : gérer le null possible des sélecteurs (querySelector peut ne rien trouver — un if de garde s’impose en mode strict), et utiliser le type précis de l’élément (HTMLInputElement pour accéder à .value, HTMLButtonElement pour un bouton) afin de débloquer les bonnes propriétés et l’autocomplétion exacte.
Que faire après ces 10 exercices TypeScript ?
Démarre tout nouveau projet directement en TypeScript strict, convertis un ancien projet JavaScript personnel un peu plus gros, puis emmène le langage là où il est devenu le standard : un premier composant React typé ou une petite API Node — le typage y révèle toute sa valeur d’équipe.
Sources
- TypeScript — Playground et documentation officielle
- freeCodeCamp — exercices et projets TypeScript gratuits
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.