Leçon 1 / 8
Leçon 01 · TypeScript

C'est quoi TypeScript ?

Le problème de JavaScript

JavaScript est un langage formidable — il tourne partout, dans le navigateur et sur les serveurs. Mais il a été conçu en 1995 pour des petits scripts, pas pour des applications de milliers de lignes.

Le problème central ? JavaScript est dynamiquement typé. Ça veut dire que tu peux écrire ça :

JavaScript
let age = 25;
age = "vingt-cinq";  // ← JavaScript accepte ça sans se plaindre !

function doubler(n) {
  return n * 2;
}

doubler("5");   // Résultat : "55" (concaténation, pas 10 !)
doubler();     // Résultat : NaN — pas d'erreur au départ, juste un bug silencieux

Ces erreurs n'apparaissent qu'à l'exécution — parfois en production, devant les utilisateurs. En équipe, sur un grand projet, c'est un cauchemar de maintenance : impossible de savoir ce qu'une fonction attend comme argument sans lire tout le code.

💡

Dynamique vs statique — un langage à typage dynamique vérifie les types pendant l'exécution (JavaScript, Python, PHP). Un langage à typage statique les vérifie à la compilation, avant même de lancer le programme (Java, C#, Go… et TypeScript).

TypeScript : le JavaScript qui se surveille

TypeScript est un sur-ensemble de JavaScript (superset) développé par Microsoft en 2012 et rendu open source en 2014. Anders Hejlsberg, le créateur de C#, l'a conçu.

La règle d'or de TypeScript : tout JavaScript valide est aussi du TypeScript valide. TypeScript ajoute une couche par-dessus — les annotations de types — et se transpile en JavaScript standard que n'importe quel navigateur ou Node.js comprend.

TypeScript — avec typage
let age: number = 25;
age = "vingt-cinq";  // ← Erreur TypeScript : Type 'string' is not assignable to type 'number'

function doubler(n: number): number {
  return n * 2;
}

doubler("5");   // ← Erreur détectée avant même d'exécuter le code !
doubler(5);    // ✓ Correct — retourne 10

Le compilateur TypeScript (tsc) lit tes fichiers .ts, vérifie les types, et produit des fichiers .js propres. Le JavaScript généré est parfaitement standard — TypeScript disparaît à l'exécution.

Les avantages concrets

Pourquoi TypeScript est-il devenu incontournable ? Trois raisons majeures :

1. Détection d'erreurs à la compilation

Les bugs de type sont détectés avant d'exécuter le programme. Plus besoin d'attendre que le bug arrive en production devant un utilisateur.

2. Autocomplétion et IntelliSense dans les IDE

Quand TypeScript connaît le type d'une variable, ton éditeur (VS Code, WebStorm…) peut te proposer automatiquement les méthodes disponibles. Tu tapes texte. et l'éditeur liste toUpperCase(), trim(), split()… sans avoir à fouiller la documentation.

3. Refactoring sûr

Renommer une fonction utilisée dans 50 fichiers ? TypeScript te dit exactement où elle est utilisée et si ton changement casse quelque chose. Sans typage, tu travailles à l'aveugle.

TypeScript en 2024 — Angular, NestJS, Deno et la quasi-totalité des grands projets frontend sont écrits en TypeScript. Sur GitHub, c'est l'un des langages à la croissance la plus rapide depuis 2018.

Installation de TypeScript

TypeScript s'installe via npm (Node Package Manager). Il te faut Node.js sur ta machine. Ensuite, une seule commande :

Terminal
# Installation globale du compilateur TypeScript
npm install -g typescript

# Vérification de la version installée
tsc --version
# Exemple de sortie : Version 5.4.5

L'option -g installe TypeScript globalement, ce qui rend la commande tsc disponible partout sur ton système. Pour un projet en équipe, on préfère souvent l'installer localement (npm install --save-dev typescript), mais pour débuter, l'installation globale est parfaite.

Ton premier fichier TypeScript

Crée un fichier bonjour.ts (l'extension .ts est obligatoire) :

TypeScript — bonjour.ts
// Annotation de type : name est une chaîne de caractères
let name: string = "Alice";
let age: number = 30;
let actif: boolean = true;

// Fonction avec types sur les paramètres et le retour
function saluer(prenom: string): string {
  return "Bonjour, " + prenom + " !";
}

console.log(saluer(name));  // Bonjour, Alice !
console.log("Age :", age);   // Age : 30

Pour compiler ce fichier en JavaScript et l'exécuter :

Terminal
# Compilation : génère bonjour.js à côté de bonjour.ts
tsc bonjour.ts

# Exécution du JavaScript généré avec Node.js
node bonjour.js

Ouvre le fichier bonjour.js généré — tu verras du JavaScript pur, sans aucune annotation de type. TypeScript est entièrement supprimé lors de la transpilation.

Le fichier tsconfig.json

Pour un vrai projet, on configure TypeScript via un fichier tsconfig.json à la racine du projet. On le génère avec :

Terminal
tsc --init

Voici un exemple de configuration minimaliste :

JSON — tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",        // Version JavaScript cible
    "module": "commonjs",     // Système de modules (Node.js)
    "outDir": "./dist",       // Dossier de sortie pour les .js
    "rootDir": "./src",       // Dossier source des .ts
    "strict": true,           // Active toutes les vérifications strictes
    "esModuleInterop": true   // Compatibilité avec les modules CommonJS
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Avec ce fichier en place, la commande tsc seule (sans argument) compile tout le projet en lisant tsconfig.json.

TypeScript vs JavaScript : quand l'utiliser ?

TypeScript n'est pas toujours la bonne réponse. Voici un guide rapide :

Utilise TypeScript si :

  • Tu travailles en équipe — les types servent de contrat entre développeurs
  • Ton projet est large ou complexe (plusieurs milliers de lignes)
  • Tu fais du long terme — le code sera maintenu pendant des mois ou des années
  • Tu utilises un framework qui le supporte nativement : Angular, NestJS, Next.js

JavaScript suffit si :

  • Tu fais un petit script ou un prototype rapide
  • Tu travailles seul sur un projet court
  • Tu débutes et veux d'abord maîtriser les bases de JavaScript
💡

Conseil de départ — si tu connais déjà JavaScript, passer à TypeScript prend quelques jours. La courbe d'apprentissage est douce : commence par annoter les variables et les fonctions, et laisse TypeScript inférer le reste. Tu n'as pas à tout typer dès le début.

// À retenir
  • TypeScript est un sur-ensemble de JavaScript — tout JS valide est du TS valide
  • Développé par Microsoft (2012), il ajoute le typage statique à JavaScript
  • Les erreurs de type sont détectées à la compilation, pas à l'exécution
  • TypeScript se transpile en JavaScript pur — les types disparaissent à l'exécution
  • Installation : npm install -g typescript — compilation : tsc monfichier.ts
  • Le fichier tsconfig.json configure le compilateur pour tout le projet
  • Indispensable pour les projets en équipe et les large codebases