Cours TypeScript Débutant : Le JavaScript Amélioré
Un cours TypeScript complet pour débutants, avec tutoriels sur les types, les interfaces et la compilation. Apprenez à écrire un JavaScript plus fiable et maintenable.
Qu'est-ce que TypeScript et pourquoi l'utiliser en 2026 ?
TypeScript est un superset de JavaScript développé par Microsoft. Il ajoute un système de typage statique optionnel à JavaScript. En clair, c'est du JavaScript avec des fonctionnalités supplémentaires qui rendent le code plus prévisible, plus facile à debugger et à maintenir, surtout pour des projets de grande envergure.
5 raisons d'apprendre TypeScript en 2026
- Détection d'erreurs à la compilation : La plupart des erreurs de type sont détectées avant même d'exécuter le code.
- Auto-complétion améliorée : Les éditeurs comme VS Code comprennent TypeScript et offrent une assistance au développement inégalée.
- Code auto-documenté : Les types servent de documentation vivante pour les autres développeurs (et pour vous-même dans 6 mois).
- Adopté par les frameworks modernes : Angular est basé sur TypeScript, et React/Vue l'intègrent parfaitement.
- Refactoring sécurisé : Modifier du code typé est bien moins risqué, le compilateur vous prévient si vous cassez quelque chose.
TypeScript vs JavaScript : La différence fondamentale
JavaScript est typé dynamiquement : le type d'une variable peut changer à l'exécution. TypeScript ajoute une couche de typage statique qui est vérifiée lors de la compilation, puis transpilée en JavaScript pur pour le navigateur ou Node.js.
let age = 30;
age = "trente"; // ✅ Pas d'erreur en JS, mais risque de bug
// TypeScript (avec types explicites)
let age: number = 30;
age = "trente"; // ❌ Erreur : Type 'string' is not assignable to type 'number'.
Installation et Configuration de TypeScript
Contrairement à JavaScript, TypeScript nécessite une installation. Pas d'inquiétude, c'est très simple avec Node.js.
Prérequis : Node.js et npm
Si ce n'est pas déjà fait, téléchargez et installez Node.js. npm (Node Package Manager) est inclus.
Installation globale de TypeScript
npm install -g typescript
# Vérifier l'installation
tsc --version
Votre premier fichier TypeScript
Créez un fichier hello.ts :
return `Bonjour, ${name} !`;
}
const message = greet("Marie");
console.log(message);
Compiler le TypeScript en JavaScript
tsc hello.ts
# Cela génère un fichier hello.js que vous pouvez exécuter
node hello.js
Fichier de configuration tsconfig.json
Pour un projet, il est recommandé de créer un fichier tsconfig.json qui configure le compilateur.
// Cela génère un fichier avec plein d'options.
// Les plus importantes :
{
"compilerOptions": {
"target": "ES2020", // Version JS de sortie
"module": "commonjs", // Système de modules
"strict": true, // Active toutes les vérifications strictes
"outDir": "./dist", // Dossier de sortie pour les fichiers JS
"rootDir": "./src" // Dossier source pour les fichiers TS
}
}
Les Types de Base en TypeScript
TypeScript reprend les types JavaScript et en ajoute de nouveaux pour plus de précision.
Types primitifs
let age: number = 30;
let estEtudiant: boolean = true;
let variableNull: null = null;
let variableIndefinie: undefined = undefined;
let grandNombre: bigint = 9007199254740991n;
let identifiant: symbol = Symbol("id");
Les tableaux (Arrays)
let fruits: string[] = ["pomme", "banane"];
let nombres: Array<number> = [1, 2, 3];
// Tableau de plusieurs types (union type)
let mixte: (string | number)[] = ["texte", 42];
Le type "any" (à éviter autant que possible)
truc = "maintenant une chaîne"; // ✅ Pas d'erreur, mais on perd l'intérêt de TypeScript
// Préférez 'unknown' si vous ne connaissez pas le type à l'avance.
Les tuples (tableaux de longueur et types fixes)
let utilisateur: [string, number] = ["Alice", 30];
// Erreur si on essaie d'assigner un type différent à la mauvaise position
// utilisateur = [30, "Alice"]; // ❌ Erreur
Les Enums (énumérations)
Rouge,
Vert,
Bleu
}
let maCouleur: Couleur = Couleur.Vert;
console.log(maCouleur); // 1 (les énums sont numérotées à partir de 0 par défaut)
// Enum avec valeurs string
enum StatutCommande {
EnAttente = "EN_ATTENTE",
Expédiée = "EXPEDIEE",
Livrée = "LIVREE"
}
Interfaces et Types Personnalisés
Les interfaces sont l'un des concepts les plus puissants de TypeScript. Elles permettent de définir la forme d'un objet.
Définir une interface
nom: string;
age: number;
email?: string; // Le ? rend la propriété optionnelle
readonly id: number; // readonly empêche la modification après initialisation
}
function afficherUtilisateur(user: Utilisateur) {
console.log(`${user.nom} a ${user.age} ans.`);
if (user.email) {
console.log(`Email: ${user.email}`);
}
}
const nouvelUtilisateur: Utilisateur = {
nom: "Bob",
age: 25,
id: 123
};
afficherUtilisateur(nouvelUtilisateur);
Type alias (vs interface)
On peut aussi utiliser type pour définir des formes d'objets ou des unions de types.
type Animal = {
nom: string;
espece: string;
};
type Chien = Animal & { // Intersection type
aboyer: () => void;
};
Quelle différence ? Les interfaces sont plus extensibles (on peut les fusionner par déclaration), les types sont plus flexibles pour les unions et les tuples. Dans la pratique, ils sont souvent interchangeables pour les objets simples.
Extension d'interface
nom: string;
}
interface Employe extends Personne {
poste: string;
}
const employe: Employe = {
nom: "Charlie",
poste: "Développeur"
};
Fonctions Typées
TypeScript permet de typer les paramètres et la valeur de retour des fonctions.
Types pour les paramètres et le retour
function addition(a: number, b: number): number {
return a + b;
}
// Fonction fléchée typée
const division = (a: number, b: number): number => {
if (b === 0) {
throw new Error("Division par zéro !");
}
return a / b;
};
Paramètres optionnels et valeurs par défaut
if (civilite) {
return `Bonjour, ${civilite} ${nom}`;
}
return `Bonjour, ${nom}`;
}
saluer("Alice"); // "Bonjour, Alice"
saluer("Alice", "Mme"); // "Bonjour, Mme Alice"
// Valeur par défaut
function puissance(base: number, exposant: number = 2): number {
return Math.pow(base, exposant);
}
puissance(5); // 25
Fonctions avec paramètres de type union
console.log(`L'identifiant est ${id}`);
// Pour utiliser des méthodes spécifiques, il faut vérifier le type
if (typeof id === "string") {
console.log(id.toUpperCase());
}
}
Classes et Programmation Orientée Objet
TypeScript enrichit les classes JavaScript avec des modificateurs d'accès et des propriétés typées.
Définition d'une classe
// Propriétés avec types et modificateurs d'accès
public nom: string; // Accessible partout (par défaut)
private age: number; // Accessible uniquement dans la classe
protected email?: string; // Accessible dans la classe et les classes filles
readonly id: number; // Ne peut être modifié qu'à l'initialisation
// Constructeur
constructor(nom: string, age: number, id: number) {
this.nom = nom;
this.age = age;
this.id = id;
}
// Méthode publique
public sePresenter(): string {
return `Je m'appelle ${this.nom} et j'ai ${this.age} ans.`;
}
// Getter / Setter
public get ageActuel(): number {
return this.age;
}
public set ageActuel(nouvelAge: number) {
if (nouvelAge > 0) {
this.age = nouvelAge;
}
}
}
const alice = new Personne("Alice", 30, 1);
console.log(alice.sePresenter());
Héritage
public cours: string[];
constructor(nom: string, age: number, id: number, cours: string[]) {
super(nom, age, id); // Appel du constructeur parent
this.cours = cours;
}
// Surcharge de méthode
public sePresenter(): string {
const presentationParente = super.sePresenter();
return `${presentationParente} J'étudie ${this.cours.join(', ')}.`;
}
}
const bob = new Etudiant("Bob", 22, 2, ["Maths", "Info"]);
console.log(bob.sePresenter());
Les Génériques (Generics)
Les génériques permettent de créer des composants réutilisables qui fonctionnent avec plusieurs types, tout en conservant l'information de type.
Fonction générique
return arg;
}
const resultatString = identite<string>("TypeScript");
const resultatNumber = identite<number>(42);
// Inférence de type : on peut omettre <type> souvent
const autre = identite(true); // T est inféré comme boolean
Interface générique
contenu: T;
id: number;
}
const boiteString: Boîte<string> = { contenu: "Cadeau", id: 1 };
const boiteNumber: Boîte<number> = { contenu: 123, id: 2 };
Classe générique
private elements: T[] = [];
public empiler(element: T): void {
this.elements.push(element);
}
public depiler(): T | undefined {
return this.elements.pop();
}
}
const pileNombres = new Pile<number>();
pileNombres.empiler(1);
pileNombres.empiler(2);
console.log(pileNombres.depiler()); // 2
Compilation et Intégration dans un Projet
Voir comment TypeScript s'intègre dans un workflow de développement réel.
Mode surveillance (watch mode)
Pour ne pas avoir à recompiler manuellement à chaque changement :
# ou avec la config
tsc -w
Intégration avec les bundlers (Webpack, Vite)
Les outils modernes comme Vite intègrent TypeScript nativement. Il suffit d'installer le plugin approprié.
npm create vite@latest mon-projet -- --template react-ts
# Ou pour un projet vanilla
npm create vite@latest mon-projet -- --template vanilla-ts
Fichiers de déclaration (.d.ts)
Pour utiliser des bibliothèques JavaScript non typées dans TypeScript, on peut créer ou installer des fichiers de déclaration.
npm install lodash
npm install --save-dev @types/lodash
// Ensuite, on peut l'importer avec les types
import * as _ from 'lodash';
const tableau = [1, 2, 3, 4];
console.log(_.chunk(tableau, 2));
🎯 Bonnes pratiques TypeScript
- Activez "strict": true dans votre tsconfig.json pour bénéficier de toutes les vérifications.
- Évitez "any" autant que possible. Utilisez "unknown" si vous devez vraiment accepter n'importe quoi.
- Lisez les messages d'erreur du compilateur : ils sont très explicites et vous guident souvent vers la solution.
- Utilisez les utilitaires types comme
Partial<T>,Pick<T>,Omit<T>pour manipuler les types existants. - Documentez les cas limites avec des commentaires, surtout pour les types complexes.
Exemple de Projet : Gestionnaire de Tâches en TypeScript
Mettons en pratique ce que nous avons appris avec un petit projet concret.
1. Définition des types
interface Tâche {
id: string;
titre: string;
description?: string;
priorité: Priorité;
estTerminée: boolean;
dateCration: Date;
}
interface GestionnaireTâches {
tâches: Tâche[];
ajouterTâche(tâche: Omit<Tâche, 'id' | 'dateCration'>): void;
supprimerTâche(id: string): void;
marquerTerminée(id: string): void;
obtenirTâchesParPriorité(priorité: Priorité): Tâche[];
}
2. Implémentation de la classe
public tâches: Tâche[] = [];
constructor(tâchesInitiales?: Tâche[]) {
if (tâchesInitiales) {
this.tâches = tâchesInitiales;
}
}
public ajouterTâche(tâche: Omit<Tâche, 'id' | 'dateCration'>): void {
const nouvelleTâche: Tâche = {
...tâche,
id: Date().toString(), // Pas top, mais pour l'exemple
dateCration: new Date(),
};
this.tâches.push(nouvelleTâche);
}
public supprimerTâche(id: string): void {
this.tâches = this.tâches.filter(t => t.id !== id);
}
public marquerTerminée(id: string): void {
const tâche = this.tâches.find(t => t.id === id);
if (tâche) {
tâche.estTerminée = true;
}
}
public obtenirTâchesParPriorité(priorité: Priorité): Tâche[] {
return this.tâches.filter(t => t.priorité === priorité);
}
}
3. Utilisation
gestionnaire.ajouterTâche({
titre: "Apprendre TypeScript",
priorité: "haute",
estTerminée: false
});
gestionnaire.ajouterTâche({
titre: "Faire les courses",
description: "Acheter du lait et du pain",
priorité: "moyenne",
estTerminée: false
});
console.log(gestionnaire.obtenirTâchesParPriorité("haute"));
Conclusion : TypeScript, un Investissement Rentable
Félicitations ! Vous avez parcouru les bases de TypeScript. Ce que vous avez appris aujourd'hui vous permettra d'écrire du JavaScript plus robuste, plus maintenable et plus professionnel.
✅ Compétences acquises :
- Installation et configuration d'un projet TypeScript
- Typage des variables, fonctions et objets
- Création d'interfaces et de types personnalisés
- Utilisation des classes et de la POO en TypeScript
- Découverte des génériques
- Intégration dans un projet concret
🚀 Prochaines étapes pour maîtriser TypeScript
- Utilitaires de type avancés :
Record,Exclude,Extract,NonNullable - Les décorateurs (utilisés dans Angular et NestJS)
- Les modules et namespaces
- TypeScript avec React : typage des props, des hooks, des contextes
- TypeScript avec Node.js/Express : créer des API typées
- Explorer les bibliothèques DefinitelyTyped (@types/)
💡 Conseil de WebIntelligence
N'essayez pas de tout typer immédiatement. Commencez par les parties critiques de votre application, puis ajoutez des types progressivement. TypeScript est conçu pour être adopté graduellement. Et surtout, laissez le compilateur vous aider : ses messages d'erreur sont vos amis !
Questions Fréquentes sur TypeScript
Dois-je apprendre JavaScript avant TypeScript ?
Oui, absolument. TypeScript est un superset de JavaScript : il est essentiel de comprendre les bases de JavaScript (variables, fonctions, objets, etc.) avant de se lancer dans le typage. Notre cours JavaScript est un excellent prérequis.
TypeScript remplace-t-il JavaScript ?
Non. TypeScript se compile en JavaScript. C'est un outil de développement qui améliore l'expérience du développeur et la robustesse du code, mais le code exécuté par le navigateur ou Node.js est toujours du JavaScript.
Quels frameworks utilisent TypeScript ?
Angular est construit avec TypeScript. React et Vue l'intègrent très bien (avec des configurations appropriées). NestJS (back-end) l'utilise aussi. TypeScript devient le standard dans l'industrie.
Est-ce difficile à apprendre ?
Si vous connaissez déjà JavaScript, l'apprentissage de TypeScript est assez rapide. Le système de types peut sembler complexe au début, mais les bases s'acquièrent en quelques jours. La difficulté augmente avec l'utilisation de types plus avancés, mais on peut rester très productif avec les bases.
