Axe 6 — JavaScript & TypeScript

🎯 Objectif global : écrire du JavaScript moderne idiomatique, puis le typer correctement avec TypeScript.

L'axe le plus dense du parcours — lis ceci avant d'attaquer

Cet axe contient deux phases distinctes qui s’enchaînent souvent mal pour un débutant :

• Phase 1 — JS essentiel (6.1 → 6.3) : 2 à 4 semaines à temps partiel. Tu apprends à coder en JS, gérer l’async, manipuler le DOM. C’est ce qu’il te faut pour attaquer l’axe 7 (frameworks).
• Phase 2 — TypeScript (6.4) : 1 à 2 semaines supplémentaires. Tu rajoutes le typage par-dessus.

Tu peux attaquer l’axe 7 (frameworks) dès la fin de la phase 1, et revenir sur 6.4 en mode « approfondissement » plus tard. Beaucoup de devs apprennent React avant TypeScript — c’est un parcours valide.

Si tu enchaînes 6.1 → 6.2 → 6.3 → 6.4 d’un trait, prévois 5 à 8 semaines à temps partiel. Le saut HTML/CSS (axe 5) → JS+TS (axe 6) est le plus violent du parcours.

Prérequis

Axes 1, 2, 4 et 5.

Phase 1 — JS essentiel (à faire avant l’axe 7)

Objectif : pouvoir attaquer un framework (React, Vue, Svelte) sans être perdu.

À l'issue de cet axe, tu sauras :

• Lire et écrire du JS moderne : let/const, destructuring, spread, template literals, modules ES
• Comprendre fonctions, closures, scope, hoisting, this — sans avoir besoin de tout maîtriser à 100 %
• Manier l'asynchronisme : Promises, async/await, AbortController
• Utiliser les APIs du navigateur : DOM, fetch, Storage, Observers

6.1 — JavaScript essentiel Types, scope, closures, prototypes, this, classes, tableaux, modules ES.

6.2 — Asynchronisme Event loop, microtasks, Promises, async/await, AbortController.

6.3 — APIs du navigateur DOM, fetch, Storage, IndexedDB, Observers, Workers, History API.

✅ À la fin de 6.3, tu es prêt pour l’axe 7 (frameworks). TypeScript n’est pas un pré-requis pour démarrer React.

Phase 2 — TypeScript (peut attendre après l’axe 7)

Objectif : ajouter le typage par-dessus ta base JS — pour attraper les bugs au compile-time et écrire du code maintenable.

À l'issue de cet axe, tu sauras :

• Typer une application TypeScript en mode strict (génériques, utility types)
• Distinguer interface vs type, union vs intersection, narrowing
• Maîtriser les discriminated unions et les patterns avancés (Zod runtime)
• Configurer tsconfig.json strict + noUncheckedIndexedAccess

6.4 — TypeScript Types, génériques, utility types, narrowing, discriminated unions, Zod.

💡 Quand revenir sur 6.4 ? Soit immédiatement après 6.3 (parcours linéaire), soit après quelques semaines de React/Vue en JS pur (parcours pragmatique). Les deux ordres marchent — choisis selon ton confort.

Projet de l’axe

SPA en TypeScript pur (sans framework) — un explorateur PokéAPI avec router maison via History API, store réactif (pattern Observable/Signal), fetch typé Zod + AbortController, TypeScript strict 0 any. ~300 lignes de code.

📁

Exercice · SPA TypeScript — sans framework

Pré-requis : Node ≥ 20. Tu réimplémentes les briques que les frameworks abstraient (routing, state, fetch typé) pour comprendre ce qu'ils font. À la fin, tu sauras quand un framework vaut le coup et quand il est de l'over-engineering.

📥 Télécharger le canevas squelette à compléter — commence ici 📦 Télécharger la correction solution complète + walkthrough pédagogique

💡 Comment l'utiliser : dézippe le canevas, suis son README.md pour démarrer et tente l'exercice. Quand tu bloques (ou quand tu as fini pour comparer), télécharge la correction — son README.md contient un walkthrough détaillé qui t'explique chaque choix de la solution.

Ressources clés

• Eloquent JavaScript — Marijn Haverbeke (gratuit en ligne)
• You Don’t Know JS Yet — Kyle Simpson
• TypeScript Handbook — typescriptlang.org
• Total TypeScript — Matt Pocock
• MDN — Web APIs