Pourquoi TypeScript ?
JavaScript avec des super-pouvoirs de typage.
Imagine : tu écris du JavaScript, et ton éditeur te dit avant même d'exécuter que tu as fait une faute. Pas besoin d'ouvrir le navigateur, de cliquer partout, de chercher le bug pendant 45 minutes. TypeScript, c'est exactement ça : un filet de sécurité pour ton code.
TypeScript = JavaScript + un système de types. Ton code est vérifié avant d'être exécuté. Et à la fin, ça redevient du JavaScript classique.
1.1Le problème avec JavaScript
JavaScript est un langage dynamiquement typé. Ça veut dire qu'une variable peut changer de type sans prévenir :
let prix = 42 // C'est un nombre
prix = "gratuit" // Maintenant c'est une string 🤯
prix = true // Et maintenant un booléen...
// Et ça, JavaScript ne dira rien :
function calculerTTC(prixHT) {
return prixHT * 1.2
}
calculerTTC("bonjour") // NaN - aucune erreur, juste un résultat absurde1.2TypeScript à la rescousse
TypeScript ajoute des annotations de type à ton JavaScript. Ton éditeur sait exactement ce que chaque variable contient :
let prix: number = 42
// prix = "gratuit" // ❌ Erreur ! Type 'string' non assignable à 'number'
function calculerTTC(prixHT: number): number {
return prixHT * 1.2
}
calculerTTC(100) // ✅ 120
// calculerTTC("bonjour") // ❌ Erreur détectée AVANT l'exécutionCannot read properties of undefined surprise. TypeScript te force à gérer les cas limites dès l'écriture.1.3Comment ça marche ?
TypeScript est un superset de JavaScript. Ça veut dire que tout code JavaScript valide est aussi du TypeScript valide. Tu ajoutes des types par-dessus, puis le compilateur (tsc) transforme ton .ts en .js classique :
Ton code Compilateur Navigateur
┌──────────┐ ┌──────────┐ ┌──────────┐
│ app.ts │ ───► │ tsc │ ───► │ app.js │
│ (typé) │ │ (vérifie)│ │ (vanilla)│
└──────────┘ └──────────┘ └──────────┘.js en .ts et ajoute les types petit à petit.1.4Installer TypeScript
L'installation est rapide avec npm :
# Installation globale
npm install -g typescript
# Vérifier la version
tsc --version
# Initialiser un projet TypeScript
mkdir mon-projet-ts && cd mon-projet-ts
npm init -y
tsc --init # Crée le fichier tsconfig.jsonLe fichier tsconfig.json généré contient la configuration du compilateur. On y reviendra en détail au chapitre 8.
1.5Premier fichier TypeScript
Crée un fichier hello.ts et lance la compilation :
// hello.ts
function saluer(nom: string): string {
return `Bonjour ${nom}, bienvenue dans TypeScript !`
}
console.log(saluer("Développeur"))
// console.log(saluer(42)) // ❌ tsc refusera de compiler# Compiler et exécuter
tsc hello.ts # Génère hello.js
node hello.js # "Bonjour Développeur, bienvenue dans TypeScript !"
# Ou en une seule commande avec ts-node
npx ts-node hello.ts1.6L'autocomplétion magique
Le vrai gain au quotidien, c'est l'autocomplétion. Ton éditeur connaît le type de chaque variable et te propose les bonnes méthodes :
const message: string = "Bonjour TypeScript"
// Ton éditeur te propose :
message.toUpperCase() // ✅ Méthode de string
message.split(" ") // ✅ Méthode de string
// message.toFixed() // ❌ Erreur, c'est une méthode de number
const nombres: number[] = [1, 2, 3]
nombres.map(n => n * 2) // ✅ L'éditeur sait que "n" est un number1.7Quand utiliser TypeScript ?
Utilise TypeScript
- • Projets de plus de quelques fichiers
- • Travail en équipe
- • Applications React / Next.js
- • APIs et backends Node.js
- • Bibliothèques open source
Pas obligatoire
- • Prototypes rapides / scripts jetables
- • Très petits projets personnels
- • Apprentissage initial de JavaScript
- • Scripting one-shot