Pourquoi TypeScript ?
JavaScript avec des super-pouvoirs de typage.
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écution1.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)│
└──────────┘ └──────────┘ └──────────┘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