Comprendre les limites de JavaScript, découvrir TypeScript, installer ts-node et écrire son premier .ts
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre les limites de JS
Pourquoi JavaScript seul pose problème sur les gros projets
2. Découvrir TypeScript
Ce qu'il est et comment il s'intègre à JavaScript
3. Installer ts-node
Configurer un tsconfig.json minimal
4. Écrire son premier .ts
Exécuter et compiler du code TypeScript
Montrer un bug JavaScript réel
NaN, undefined — les étudiants reconnaissent le problème
Présenter TypeScript
JavaScript + types : un filet de sécurité, pas un nouveau langage
Live coding : installation
ts-node, tsconfig.json, premier .ts
Comparer JS vs TS
L'erreur détectée AVANT l'exécution
Écrire une fonction typée ensemble
Voir l'autocompletion en direct
Pourquoi TypeScript a été créé
JavaScript est dynamiquement typé
Les erreurs apparaissent... à l'exécution
Que se passe-t-il avec ces opérations ?
const prix = '50';
const quantite = 3;
const total = prix * quantite;
// Résultat : 150 (string * number = number en JS!)
const total2 = prix + quantite;
// Résultat : '503' (string + number = string!)
⚠️ JavaScript convertit automatiquement les types
Parfois ça marche... parfois ça fait des choses bizarres
function calculerPrix(prix) {
const taxe = 0.2;
return prix * (1 + taxe);
}
calculerPrix(); // Oups, j'ai oublié l'argument!
// Résultat : NaN
❌ JavaScript ne nous dit rien avant l'exécution
L'erreur apparaît seulement quand le code tourne
const user = getUser(); // peut retourner null
const name = user.name;
// TypeError: Cannot read property 'name' of null
💥 L'erreur la plus courante en JavaScript
On suppose qu'un objet existe... mais parfois non
❌ Le problème
• Pas de vérification de types
• Erreurs découvertes à l'exécution
• Pas d'autocompletion fiable
• Refactoring risqué
🤔 Sur un gros projet...
• Comment savoir ce qu'une fonction attend ?
• Comment être sûr de ne rien casser ?
• Comment maintenir 10 000+ lignes ?
💡 C'est là que TypeScript arrive...
Un filet de sécurité, pas un nouveau langage
Tout JS valide est du TS valide
On ne perd rien, on gagne de la sécurité
TypeScript ajoute des types statiques à JavaScript
Les types sont vérifiés avant l'exécution
JavaScript
function add(a, b) {
return a + b;
}
a et b peuvent être n'importe quoi
TypeScript
function add(a: number, b: number): number {
return a + b;
}
a et b DOIVENT être des nombres
❌ JavaScript
add('5', 3);
// Résultat : '53' 😱
// Pas d'erreur!
✅ TypeScript
add('5', 3);
// Error: Argument of type 'string'
// is not assignable to 'number'
🎯 L'erreur est détectée dans l'éditeur, pas au runtime!
1️⃣ Tout JavaScript valide est du TypeScript valide
Renommez .js en .ts → ça compile!
2️⃣ Les types sont optionnels au début
Ajoutez les types progressivement
3️⃣ TypeScript compile vers JavaScript
Le navigateur ne connaît que JavaScript
💡 TypeScript = outil de développement, pas de runtime
Compiler et exécuter du TypeScript
ts-node = TypeScript Node.js
Compile + exécute en une commande
⚠️ Node.js doit être installé
# Vérifier la version de Node.js
node --version
# Recommandé : Node.js 18+ ou 20+
⚠️ Piège courant
Si Node.js n'est pas à jour, l'installation de ts-node peut échouer
# Installer TypeScript et ts-node globalement
npm install -g typescript ts-node
# Ou localement dans un projet
npm install -D typescript ts-node
💡 -D = devDependencies (recommandé pour les projets)
# Version du compilateur TypeScript
tsc --version
// Version 5.x.x
# Version de ts-node
ts-node --version
// Version 10.x.x
✅ Si les versions s'affichent, tout est prêt!
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"outDir": "./dist"
},
"include": ["src/**/*"]
}
💡 Créer ce fichier à la racine du projet
target: "ES2020"
Version JavaScript générée (ES2020 = moderne)
module: "commonjs"
Système de modules (Node.js utilise CommonJS)
strict: true
Active toutes les vérifications strictes — C'EST LE BUT!
outDir: "./dist"
Dossier où les fichiers .js seront générés
Créer, exécuter et compiler
3 étapes : créer → exécuter → compiler
// hello.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message = greet("World");
console.log(message);
📝 Notez les annotations de type
name: string et : string après les parenthèses
# Exécuter directement (compile + run)
ts-node hello.ts
// Output: Hello, World!
⚡ ts-node = compilation en mémoire + exécution
Idéal pour le développement!
# Compiler vers JavaScript
tsc hello.ts
# Ou compiler tout le projet
tsc
📁 Résultat : hello.js créé
// hello.js (généré)
function greet(name) {
return `Hello, ${name}!`;
}
const message = greet("World");
console.log(message);
Les types sont supprimés dans le JavaScript final!
function greet(name: string): string {
return `Hello, ${name}!`;
}
const result = greet("Alice");
result.| // ← curseur ici
✨ L'éditeur SAIT que result est un string
Autocompletion : toUpperCase, slice, charAt, includes...
Le même code, deux expériences différentes
Voyons comment TypeScript protège notre code
function calculateTotal(items) {
return items.reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);
}
calculateTotal([
{ price: 10, quantity: 2 },
{ price: 5 } // Oups, quantity manquant!
]);
💥 Résultat : NaN
L'erreur n'apparaît que quand on exécute le code!
interface Item {
price: number;
quantity: number;
}
function calculateTotal(items: Item[]): number {
return items.reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);
}
calculateTotal([
{ price: 10, quantity: 2 },
{ price: 5 } // ← Erreur ici!
]);
🎯 Error: Property 'quantity' is missing in type...
L'erreur apparaît AVANT d'exécuter!
L'erreur apparaît dans l'éditeur
pas au runtime
❌ Sans TypeScript
• Erreur découverte en production
• Debug après le fait
• Peut affecter les utilisateurs
✅ Avec TypeScript
• Erreur découverte en codant
• Correction immédiate
• Zéro impact utilisateur
Écrivons une fonction typée ensemble
Fonction : calculer la moyenne d'un tableau
Les étudiants voient l'autocompletion en direct
Écrire une fonction qui calcule la moyenne d'un tableau de nombres
function calculateAverage(numbers: number[]): number {
if (numbers.length === 0) return 0;
const sum = numbers.reduce((a, b) => a + b, 0);
return sum / numbers.length;
}
✅ TypeScript vérifie :
• numbers est bien un tableau de nombres
• La fonction retourne bien un nombre
const numbers = [1, 2, 3, 4, 5];
numbers.|
✨ L'éditeur propose automatiquement :
💡 Plus besoin de mémoriser toutes les méthodes!
"TypeScript est un langage complètement différent"
❌ Faux!
TypeScript EST JavaScript avec des types en plus
✅ Réalité
Tout votre code JS existant est déjà valide en TS
💡 Conseil : Renommez .js en .ts et ajoutez les types progressivement
"L'installation de ts-node a échoué"
npm ERR! engine Unsupported engine
❌ Cause : Node.js trop ancien
✅ Solution : Mettre à jour Node.js
# Avec nvm
nvm install 20
nvm use 20
1. TypeScript = JavaScript + types — on ne perd rien
2. L'erreur apparaît dans l'éditeur, pas au runtime
3. strict: true toujours activé — c'est le but!
4. ts-node pour le dev, tsc pour la production
Prêts à écrire du TypeScript!
Prochaine étape : Approfondir les types de base
string, number, boolean, arrays, objects, unions...