Développement web front-end
TypeScript : typer ses applications JavaScript
Fiabiliser son code grâce au typage statique : types, classes, génériques, modules et outillage.
- Durée
- 21 h · 3 jours
- Niveau
- Intermédiaire
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme apprend à écrire des applications en TypeScript : système de types, inférence, interfaces, classes, génériques, modules et fichiers de définition. Les participants configurent leur outillage, migrent progressivement du JavaScript existant et découvrent les décorateurs, avant d’intégrer TypeScript dans une chaîne de build moderne.
À qui s’adresse ce programme
- Développeurs JavaScript souhaitant fiabiliser leur code
- Équipes qui adoptent Angular, React, Node.js ou NestJS
- Architectes front-end
Prérequis
- Très bonne connaissance de JavaScript moderne
- Notions de programmation objet
Objectifs pédagogiques
- Installer et configurer le compilateur TypeScript
- Typer variables, fonctions, objets et tableaux
- Utiliser interfaces, alias, unions et types utilitaires
- Concevoir des classes et des génériques
- Organiser le code en modules et exploiter les fichiers de définition
- Intégrer TypeScript avec Vite ou esbuild
Programme détaillé
6 modules · 21 h · 3 jours
Jour 1
Découvrir TypeScript et son outillage
50 % théorie · 50 % pratique
- Pourquoi typer : bénéfices et limites
- Installation, tsconfig et options du compilateur
- Transpilation et source maps
- Intégration à l’éditeur
- Stratégie de migration d’un projet existant
Le système de types
30 % théorie · 70 % pratique
- Types primitifs, tableaux, tuples et énumérations
- Inférence de type
- Unions, intersections et types littéraux
- Typage des fonctions et des paramètres optionnels
- any, unknown, never et gardes de type
🛠 Ateliers pratiques
Typer un jeu de données1,5 h
Ajouter des types à un script JavaScript existant.
✅ Livrable : Un script entièrement typé
Jour 2
Interfaces, classes et génériques
30 % théorie · 70 % pratique
- Interfaces et alias de types
- Classes, modificateurs d’accès et héritage
- Classes abstraites et implémentation d’interfaces
- Génériques et contraintes
- Types utilitaires : Partial, Pick, Omit, Record
🛠 Ateliers pratiques
Bibliothèque générique1,5 h
Créer des structures de données génériques et typées.
✅ Livrable : Une mini-bibliothèque typée
Modules et fichiers de définition
50 % théorie · 50 % pratique
- Modules ES en TypeScript
- Déclarations ambiantes et fichiers .d.ts
- Typer une bibliothèque JavaScript tierce
- Mixins et composition
- Publication et consommation de types
Jour 3
Décorateurs
30 % théorie · 70 % pratique
- Principe des décorateurs et syntaxe standard
- Décorateurs de classe, méthode, propriété et paramètre
- Fabriques et composition de décorateurs
- Cas d’usage dans les frameworks
- Limites et bonnes pratiques
🛠 Ateliers pratiques
Décorateurs de validation1,5 h
Écrire des décorateurs pour valider et journaliser.
✅ Livrable : Un jeu de décorateurs réutilisables
Intégration dans une chaîne moderne
30 % théorie · 70 % pratique
- Projet Vite ou esbuild avec TypeScript
- Linter, formateur et tests typés
- Configuration stricte et bonnes pratiques
- Typer une API et ses réponses
- Projet de synthèse
🛠 Ateliers pratiques
Application typée complète2 h
Assembler une petite application web entièrement typée.
✅ Livrable : Une application TypeScript buildée
Outils et technologies
Node.jsTypeScriptVisual Studio Code
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code et Node.js installés
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
Débouchés
- Une application typée de bout en bout
- Un plan de migration d’un projet JavaScript
- Un code plus lisible et mieux outillé