Outils & qualité · 5 mondes · 15 étapes

TypeScript

Typer son JavaScript pour coder sans peur, vérifié par le vrai compilateur.

Progression

0 %

0/15 étapes terminées

← Maîtrise avancée

Avancé · 11 min de lecture

TypeScript dans un vrai projet

Configuration, migration, types partagés

1Définition

Dans un projet, TypeScript se règle avec un tsconfig.json strict, tourne dans l'éditeur et dans l'intégration continue, et sert de contrat entre le serveur et le client grâce à des types partagés. Un projet JavaScript existant se migre fichier par fichier.

2Principes fondamentaux

strict dès le départ

Activer les vérifications plus tard coûte beaucoup plus cher.

Vérifier en CI

tsc --noEmit dans le pipeline : une erreur de types bloque la fusion.

Des types partagés

Serveur et client importent les mêmes définitions.

Migrer progressivement

allowJs, puis un fichier .ts à la fois.

3Exemples pratiques

Vérifier les types en intégration continue

Exemple

1# .github/workflows/ci.yml2- run: npx tsc --noEmit

La compilation échoue au moindre type incohérent, avant tout déploiement.

Des types générés depuis la base

Exemple

1npx supabase gen types typescript --project-id … > src/lib/database.types.ts

Les tables de la base deviennent des types : une colonne renommée casse la compilation, pas la production.

4Erreurs courantes

Désactiver strict pour aller vite

À éviter

"strict": false

À faire

"strict": true, quitte à migrer par étapes

Pourquoi : Les erreurs les plus fréquentes (null) ne sont plus vues.

Des @ts-ignore partout

À éviter

// @ts-ignore

À faire

// @ts-expect-error — avec une raison

Pourquoi : @ts-ignore survit même quand l'erreur a disparu.

5Subtilités à connaître

◆Next.js, Vite et Bun exécutent le TypeScript en effaçant les types, sans les vérifier : c'est tsc qui vérifie.
◆Les fichiers .d.ts décrivent les types d'une bibliothèque JavaScript ; @types/… les fournit pour les plus courantes.
◆Les types récursifs et conditionnels permettent des merveilles… et des messages d'erreur illisibles : la simplicité reste une qualité.

6Techniques d'expert

satisfies

Vérifier qu'une configuration respecte un type tout en gardant ses valeurs littérales pour l'autocomplétion.

Des types marqués

type IdJoueur = string & { __marque: "IdJoueur" } empêche de passer un identifiant de leçon à la place d'un identifiant de joueur.

Des types de routes

Next.js peut typer les liens : une URL inexistante devient une erreur de compilation.

// next.config.tsexport default { typedRoutes: true };

7Sur le terrain

Sys-Code est écrit en TypeScript strict : les cours eux-mêmes sont des objets typés, vérifiés à chaque compilation.
La plupart des grandes bibliothèques JavaScript sont aujourd'hui écrites en TypeScript ou livrées avec leurs types.
Les équipes qui migrent vers TypeScript citent surtout un gain : pouvoir renommer et restructurer sans peur.

8Vérifie ta compréhension

Question 1/3

Score 0

Qui vérifie réellement les types dans un projet Next.js ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.