Introduction à TypeScript
TypeScript = JavaScript + Types
TypeScript est un sur-ensemble de JavaScript qui ajoute des types statiques. Tout code JavaScript valide est du TypeScript valide.
Pourquoi TypeScript ?
- Détection d'erreurs : Les erreurs sont détectées avant l'exécution
- Autocomplétion : Votre éditeur vous aide mieux
- Documentation : Les types servent de documentation
- Refactoring : Plus facile de modifier du code
- Utilisé partout : Standard dans l'industrie
JavaScript vs TypeScript
Exemple JavaScript (sans types)
function greet(name) {
return `Hello ${name}!`;
}
greet('Alice'); // OK
greet(42); // OK mais bizarre
greet(); // OK mais name sera undefined
Problème : JavaScript accepte tout sans se plaindre, les erreurs arrivent à l'exécution.
Même exemple en TypeScript
function greet(name: string): string {
return `Hello ${name}!`;
}
greet('Alice'); // OK
greet(42); // Erreur: number n'est pas string
greet(); // Erreur: argument manquant
Avantage : TypeScript détecte les erreurs avant d'exécuter le code.
Types de base
Variables typées
// Type explicite
const name: string = 'Alice';
const age: number = 25;
const isStudent: boolean = true;
// Type inféré (TypeScript devine le type)
const name = 'Alice'; // TypeScript sait que c'est un string
const age = 25; // TypeScript sait que c'est un number
const isStudent = true; // TypeScript sait que c'est un boolean
Astuce
Type inference : TypeScript devine souvent les types tout seul. Pas besoin de tout annoter !
Quelle est la différence entre const name: string = 'Alice' et const name = 'Alice' ?
Tableaux
// Tableau de nombres
const numbers: number[] = [1, 2, 3, 4, 5];
// Tableau de strings
const names: string[] = ['Alice', 'Bob', 'Charlie'];
// Syntaxe alternative (même chose)
const numbers: Array<number> = [1, 2, 3, 4, 5];
Objets
// Définir la structure d'un objet
const user: { name: string; age: number } = {
name: 'Alice',
age: 25
};
// Ou avec une interface (plus lisible)
interface User {
name: string;
age: number;
email?: string; // ? signifie optionnel
}
const user: User = {
name: 'Alice',
age: 25
// email est optionnel, pas obligé de le mettre
};
Que signifie le ? dans email?: string ?
Fonctions
Typer les paramètres et le retour
// Sans types (JavaScript)
function add(a, b) {
return a + b;
}
// Avec types (TypeScript)
function add(a: number, b: number): number {
return a + b;
}
add(2, 3); // OK: 5
add('2', '3'); // Erreur: string n'est pas number
Arrow functions
// Fonction fléchée typée
const multiply = (a: number, b: number): number => {
return a * b;
};
// Avec return implicite
const multiply = (a: number, b: number): number => a * b;
// TypeScript peut inférer le type de retour
const multiply = (a: number, b: number) => a * b; // retour: number (inféré)
Paramètres optionnels
function greet(name: string, greeting?: string): string {
if (greeting) {
return `${greeting}, ${name}!`;
}
return `Hello, ${name}!`;
}
greet('Alice'); // "Hello, Alice!"
greet('Bob', 'Bonjour'); // "Bonjour, Bob!"
Valeurs par défaut
function greet(name: string, greeting: string = 'Hello'): string {
return `${greeting}, ${name}!`;
}
greet('Alice'); // "Hello, Alice!"
greet('Bob', 'Hi'); // "Hi, Bob!"
Types spéciaux
any (éviter !)
let value: any = 'hello';
value = 42; // OK
value = true; // OK
value = [1, 2, 3]; // OK
Attention
Évitez any ! Il désactive complètement TypeScript. Utilisez-le seulement si vraiment nécessaire.
Union types
// Variable qui peut être string OU number
let id: string | number;
id = '123'; // OK
id = 123; // OK
id = true; // Erreur
// Utile pour les fonctions
function printId(id: string | number) {
console.log(`ID: ${id}`);
}
printId('ABC123'); // OK
printId(456); // OK
Que fait le type string | number ?
Type literal
// Variable qui ne peut avoir que certaines valeurs
let status: 'pending' | 'success' | 'error';
status = 'pending'; // OK
status = 'success'; // OK
status = 'loading'; // Erreur: pas dans les valeurs autorisées
Interfaces vs Types
Deux façons de définir des structures :
Interface
interface User {
name: string;
age: number;
email?: string;
}
const user: User = {
name: 'Alice',
age: 25
};
Type Alias
type User = {
name: string;
age: number;
email?: string;
};
const user: User = {
name: 'Alice',
age: 25
};
Information
Interface vs Type : Pour les objets simples, les deux fonctionnent. Les interfaces sont plus extensibles, les types plus flexibles. Dans la plupart des cas, utilisez ce que vous préférez !
Quelle est la principale différence entre interface et type pour définir un objet ?
Exemples pratiques
Tableau d'objets typé
interface Student {
id: number;
name: string;
grade: number;
}
const students: Student[] = [
{ id: 1, name: 'Alice', grade: 15 },
{ id: 2, name: 'Bob', grade: 12 },
{ id: 3, name: 'Charlie', grade: 18 }
];
// TypeScript aide avec l'autocomplétion !
const names = students.map(s => s.name); // TypeScript sait que s est un Student
const passed = students.filter(s => s.grade >= 12);
Fonctions avec objets typés
interface Product {
id: number;
name: string;
price: number;
}
function calculateTotal(products: Product[]): number {
return products.reduce((sum, p) => sum + p.price, 0);
}
const cart: Product[] = [
{ id: 1, name: 'Laptop', price: 1000 },
{ id: 2, name: 'Mouse', price: 25 }
];
const total = calculateTotal(cart); // 1025
Comment utiliser TypeScript ?
TypeScript ne s'exécute pas directement dans le navigateur. Il doit être compilé en JavaScript avant d'être exécuté.
Information
Pour cette séance : Pas besoin d'installer TypeScript maintenant !
Nous couvrons ici les concepts fondamentaux de TypeScript pour vous familiariser avec la syntaxe et les types. L'installation et la configuration seront abordées plus tard dans le cours, lorsque nous travaillerons sur des projets concrets.
Pour l'instant, concentrez-vous sur la compréhension des concepts : types, interfaces, et comment TypeScript vous aide à écrire du code plus robuste.
Ce qu'il faut savoir
- TypeScript (.ts) → Compilé → JavaScript (.js)
- Les navigateurs exécutent du JavaScript, pas du TypeScript
- Les frameworks modernes gèrent la compilation automatiquement
- Un fichier
tsconfig.jsonconfigure le comportement de TypeScript
Nous verrons tout cela en détail dans les prochaines séances !
Comprendre, pas mémoriser
Ce qu'il faut retenir :
- TypeScript = JavaScript + Types : tout code JS valide est du TS valide
- Types de base :
string,number,boolean,array[] - Interfaces : définir la structure des objets (
interface User { name: string }) - Type inference : TypeScript devine souvent les types automatiquement
- Optional :
?rend une propriété optionnelle (email?: string) - Union types :
string | numberpour plusieurs types possibles - Évitez
any: désactive complètement TypeScript
Vous n'avez pas besoin de tout mémoriser maintenant. En pratiquant avec les exercices et en Séance 2, tout deviendra plus concret !
Prochaine étape
Astuce
Ne vous inquiétez pas !
Vous n'avez pas besoin de mémoriser toute la syntaxe TypeScript maintenant. En Séance 2, nous l'utiliserons dans des projets concrets, et vous verrez à quel point c'est utile.
L'essentiel : comprendre que TypeScript = JavaScript + types pour vous aider.