Apprendre TypeScript : types, interfaces et génériques pour fiabiliser votre code JavaScript

TypeScript est un langage qui ajoute un système de types à JavaScript : vous indiquez qu’une variable contient un nombre, qu’une fonction attend une chaîne ou qu’un objet possède telles propriétés, et l’éditeur signale les incohérences avant même l’exécution du code. Le résultat est ensuite compilé en JavaScript standard, exécutable partout.

Ce guide s’adresse aux développeurs qui connaissent les bases de JavaScript et veulent comprendre ce que TypeScript leur apporte. Vous y verrez comment installer l’outil, compiler un premier fichier, typer variables et fonctions, décrire vos données avec des unions, des tuples, des enums et des interfaces, utiliser les génériques, puis configurer un projet avec tsconfig.json.

Qu’est-ce que TypeScript ?

TypeScript est un langage open source développé par Microsoft. C’est un sur-ensemble de JavaScript : il reprend toute sa syntaxe et y ajoute des annotations de types. Un compilateur vérifie la cohérence de ces types, puis produit du JavaScript classique. Les types disparaissent donc à l’exécution : ils servent uniquement pendant le développement.

Concrètement, voici la même fonction dans les deux langages :

// JavaScript : rien n'empêche d'appeler calculerTTC("cent")
function calculerTTC(prix, taux) {
  return prix * (1 + taux);
}

// TypeScript : l'appel calculerTTC("cent", 0.2) est refusé dès l'écriture
function calculerTTCTypee(prix: number, taux: number): number {
  return prix * (1 + taux);
}

Les fichiers TypeScript portent l’extension .ts, ou .tsx lorsqu’ils contiennent du JSX, comme dans les composants React.

Pourquoi utiliser TypeScript ?

JavaScript est un langage à typage dynamique : une variable peut changer de type, une fonction accepte n’importe quel argument, et les erreurs n’apparaissent qu’au moment où le code s’exécute, parfois chez l’utilisateur. TypeScript déplace la détection de ces erreurs vers l’éditeur.

Les bénéfices concrets :

• Moins de bugs silencieux : propriété mal orthographiée, argument oublié, valeur potentiellement undefined sont signalés avant l’exécution.
• Une autocomplétion précise : l’éditeur connaît la forme de chaque objet et propose ses propriétés.
• Un refactoring sûr : renommer une propriété ou modifier la signature d’une fonction met en évidence tous les endroits à corriger.
• Un code auto-documenté : les types décrivent ce qu’attend et renvoie chaque fonction, sans commentaire supplémentaire.
• Un travail d’équipe facilité : les interfaces servent de contrat entre les différentes parties d’une application.

En formation, nous voyons souvent des développeurs réticents au départ, qui trouvent les annotations fastidieuses. L’impression s’inverse dès le premier refactoring important : là où JavaScript laisse chercher les régressions à la main, TypeScript les liste.

TypeScript vs JavaScript : les différences essentielles

Critère	JavaScript	TypeScript
Typage	Dynamique, vérifié à l’exécution	Statique, vérifié avant l’exécution
Exécution	Directe dans le navigateur ou Node.js	Compilation en JavaScript nécessaire
Détection des erreurs de type	À l’exécution, parfois en production	Dans l’éditeur, pendant l’écriture
Autocomplétion	Approximative	Précise, fondée sur les types
Mise en place	Aucune	Installation du compilateur et fichier tsconfig.json
Courbe d’apprentissage	Plus douce	Suppose de connaître JavaScript
Projets adaptés	Scripts courts, prototypes	Applications de taille moyenne ou grande, travail en équipe

TypeScript ne vous dispense donc pas de connaître JavaScript : il en garde toute la logique. Si vos bases sont fragiles, commencez par notre guide pour apprendre JavaScript.

Apprendre TypeScript : les étapes pour démarrer

Étape 1 — Installer Node.js, VS Code et TypeScript

Installez Node.js (version LTS) depuis son site officiel, puis Visual Studio Code, qui intègre nativement la prise en charge de TypeScript. Créez ensuite un dossier de projet et installez le compilateur :

mkdir decouverte-ts
cd decouverte-ts
npm init -y
npm install --save-dev typescript
npx tsc --version

L’installation locale, dans le projet, garantit que toute l’équipe utilise la même version du compilateur. La commande npx exécute l’outil installé dans le dossier node_modules.

Étape 2 — Écrire et compiler votre premier fichier

Créez index.ts :

const message: string = "Bonjour TypeScript";
console.log(message);

Compilez-le, puis exécutez le JavaScript produit :

npx tsc index.ts
node index.js

Le compilateur tsc a généré un fichier index.js sans aucune annotation. Pour recompiler automatiquement à chaque enregistrement, utilisez npx tsc --watch. Essayez maintenant d’écrire const age: number = "trente"; : VS Code souligne l’erreur en rouge, et tsc refuse de valider le fichier.

Étape 3 — Utiliser les types primitifs et l’inférence

Les types TypeScript de base correspondent aux valeurs de JavaScript :

let prenom: string = "Sam";
let age: number = 34;
let estActif: boolean = true;
let rien: null = null;
let pasDefini: undefined = undefined;

// Inférence : TypeScript déduit le type tout seul
let ville = "Nantes";   // type string
ville = 44;             // Erreur : le type 'number' n'est pas assignable au type 'string'

L’inférence de type est essentielle : quand une variable est initialisée, TypeScript devine son type. Il est donc inutile d’annoter chaque variable. Notre conseil : laissez l’inférence travailler pour les variables locales, et annotez explicitement les paramètres de fonctions, les valeurs de retour publiques et les structures de données.

Deux types particuliers méritent attention. any désactive toute vérification : c’est une porte de sortie, à utiliser le moins possible. unknown accepte aussi n’importe quelle valeur, mais impose une vérification avant usage, ce qui le rend bien plus sûr.

Étape 4 — Typer les fonctions et les valeurs par défaut

function saluer(nom: string, politesse: string = "Bonjour"): string {
  return `${politesse}, ${nom} !`;
}

function afficherPrix(montant: number, devise?: string): void {
  console.log(`${montant.toFixed(2)} ${devise ?? "€"}`);
}

const doubler = (n: number): number => n * 2;

saluer("Alex");               // "Bonjour, Alex !"
saluer("Alex", "Bonsoir");    // "Bonsoir, Alex !"
saluer(42);                   // Erreur : number n'est pas assignable à string

Un paramètre avec valeur par défaut est facultatif et son type est déduit de la valeur. Le point d’interrogation (devise?) rend un paramètre optionnel : sa valeur peut alors être undefined, d’où l’opérateur ?? qui fournit une valeur de repli. Le type de retour void indique qu’une fonction ne renvoie rien d’utile.

Étape 5 — Tableaux, unions, tuples et enums

// Tableaux
const notes: number[] = [12, 15, 9];
const tags: Array<string> = ["ts", "js"];

// Union : plusieurs types possibles
let identifiant: string | number = 42;
identifiant = "A-42";

// Union de littéraux : un ensemble fermé de valeurs
type Statut = "brouillon" | "publie" | "archive";
let statut: Statut = "brouillon";
statut = "supprime";   // Erreur

// Tuple : tableau de longueur et de types fixes
const coordonnees: [number, number] = [47.21, -1.55];
const entree: [string, number] = ["Stock", 120];

// Enum
enum Role {
  Admin,
  Editeur,
  Lecteur,
}
const monRole: Role = Role.Editeur;

Les unions sont l’un des outils les plus utiles au quotidien. Pour utiliser une valeur de type union, TypeScript vous oblige à vérifier de quel type il s’agit : c’est le rétrécissement de type (narrowing).

function formaterId(id: string | number): string {
  if (typeof id === "number") {
    return id.toString().padStart(6, "0");  // ici, id est un number
  }
  return id.toUpperCase();                   // ici, id est un string
}

Beaucoup d’équipes préfèrent aujourd’hui les unions de littéraux ("admin" | "editeur") aux enums : elles n’ajoutent aucun code JavaScript à la compilation et restent lisibles. Les deux approches sont valables ; l’important est d’être cohérent dans un projet.

Étape 6 — Décrire vos objets avec les interfaces et les alias de type

Une interface décrit la forme d’un objet : ses propriétés, leurs types, celles qui sont optionnelles ou en lecture seule.

interface Utilisateur {
  readonly id: number;
  nom: string;
  email: string;
  telephone?: string;          // optionnelle
  adresse: {
    ville: string;
    codePostal: string;
  };
}

const u: Utilisateur = {
  id: 1,
  nom: "Sam",
  email: "sam@exemple.fr",
  adresse: { ville: "Nantes", codePostal: "44000" },
};

u.id = 2;   // Erreur : id est en lecture seule

interface Administrateur extends Utilisateur {
  permissions: string[];
}

Un alias de type, déclaré avec type, peut décrire un objet de la même façon, mais aussi une union, un tuple ou un type primitif renommé.

Besoin	interface	type
Décrire la forme d’un objet	Oui	Oui
Étendre un autre type	extends	Intersection &
Union ou type littéral	Non	Oui ("a" | "b")
Tuple ou type primitif renommé	Non	Oui
Fusion de déclarations du même nom	Oui	Non

Règle pratique : interface pour décrire des objets et des contrats (props de composants, réponses d’API), type pour les unions, les tuples et les combinaisons.

Étape 7 — Écrire du code réutilisable avec les génériques

Les génériques permettent d’écrire une fonction ou un type qui fonctionne avec plusieurs types, tout en conservant l’information de type. Le paramètre de type s’écrit entre chevrons, souvent T.

function premier<T>(liste: T[]): T | undefined {
  return liste[0];
}

const n = premier([10, 20, 30]);      // n : number | undefined
const s = premier(["a", "b"]);        // s : string | undefined

interface ReponseApi<T> {
  succes: boolean;
  donnees: T;
  erreur?: string;
}

const reponse: ReponseApi<Utilisateur[]> = {
  succes: true,
  donnees: [],
};

Sans générique, il faudrait soit écrire une fonction par type, soit utiliser any et perdre toute vérification. TypeScript fournit aussi des types utilitaires génériques prêts à l’emploi : Partial<T> rend toutes les propriétés optionnelles, Pick<T, "nom" | "email"> en sélectionne certaines, Omit<T, "id"> en retire, Record<string, number> décrit un dictionnaire.

Étape 8 — Configurer le projet avec tsconfig.json

Dans un vrai projet, on ne compile pas fichier par fichier. Générez un fichier de configuration :

npx tsc --init

Puis adaptez ses options principales :

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

• target : version de JavaScript produite ;
• strict : active l’ensemble des vérifications strictes, dont la gestion rigoureuse de null et undefined. Activez-le dès le début d’un projet, c’est beaucoup plus difficile après coup ;
• rootDir et outDir : dossier des sources et dossier de sortie ;
• include et exclude : fichiers à compiler et à ignorer.

Organisez ensuite votre projet avec un dossier src pour le code TypeScript, un dossier dist pour le JavaScript généré (à ne pas versionner), et un dossier types pour les interfaces partagées. La commande npx tsc, sans argument, compile alors tout le projet selon cette configuration.

Bonnes pratiques pour écrire un TypeScript solide

• Activez strict et ne le désactivez pas pour faire taire une erreur : l’erreur signale presque toujours un vrai cas oublié.
• Bannissez any de votre code. Pour une donnée inconnue, utilisez unknown et vérifiez-la.
• Typez aux frontières : paramètres de fonctions, retours publics, réponses d’API, props de composants. Laissez l’inférence faire le reste.
• Évitez les assertions du type valeur as Utilisateur : elles demandent au compilateur de vous croire sur parole. Préférez une vérification réelle.
• Validez les données externes : un type TypeScript ne vérifie pas une réponse d’API à l’exécution. Des bibliothèques de validation de schémas comblent ce manque.
• Migrez progressivement un projet JavaScript : l’option allowJs permet de faire cohabiter fichiers .js et .ts, puis de convertir fichier par fichier.
• Versionnez votre configuration (tsconfig.json, package.json) avec Git et GitHub pour que toute l’équipe compile avec les mêmes règles.

Migrer un projet JavaScript vers TypeScript

Inutile de tout réécrire d’un coup. Comme tout code JavaScript est déjà du TypeScript valide, une migration se mène progressivement, sans bloquer le projet :

1. Installez TypeScript dans le projet et créez un tsconfig.json avec les options allowJs et checkJs à false au départ : les fichiers JavaScript existants continuent de fonctionner tels quels.
2. Renommez un premier fichier peu dépendant du reste, par exemple un module d’utilitaires, de .js en .ts. Corrigez les erreurs signalées.
3. Installez les définitions de types des bibliothèques qui n’en embarquent pas, via les paquets @types/… (par exemple @types/node pour Node.js).
4. Créez un fichier de types partagés pour les données centrales de l’application (utilisateur, produit, commande) et réutilisez ces interfaces partout.
5. Convertissez fichier par fichier, en commençant par les modules les plus utilisés : chaque conversion améliore l’autocomplétion de tous les fichiers qui en dépendent.
6. Activez strict une fois la majorité du code convertie, puis traitez les erreurs restantes par lots.

Notre conseil : fixez une règle simple dans l’équipe, « tout nouveau fichier s’écrit en TypeScript ». La part de code typé augmente alors naturellement, sans chantier dédié.

Les erreurs fréquentes quand on débute en TypeScript

Erreur ou message	Cause	Solution
Object is possibly 'undefined'	Accès à une valeur qui peut ne pas exister (option, recherche dans un tableau)	Vérifier avec if, utiliser ?. ou fournir une valeur par défaut avec ??
Property 'x' does not exist on type	Propriété absente de l’interface ou faute de frappe	Corriger le nom ou compléter l’interface
Argument of type 'string' is not assignable to parameter of type 'number'	Donnée non convertie, souvent issue d’un champ de formulaire	Convertir avec Number() avant l’appel
any partout dans le code	Solution de facilité pour faire disparaître les erreurs	Définir les interfaces manquantes, utiliser unknown
Le JavaScript compilé ne se met pas à jour	Compilation lancée une seule fois	Utiliser tsc --watch ou l’outil de build du projet
Fichiers compilés mélangés aux sources	Pas de outDir défini	Configurer rootDir et outDir dans tsconfig.json
Confiance aveugle dans les types d’une API	Les types ne vérifient rien à l’exécution	Valider la réponse avant de l’utiliser

Où utiliser TypeScript ensuite ?

TypeScript s’utilise dans presque tous les environnements JavaScript :

• Front-end : React, Vue, Angular (qui l’impose) et Svelte ont un support natif. Avec React et Next.js, vous typerez vos props, vos états et vos Server Actions.
• Back-end : les API Node.js, avec Express ou d’autres frameworks, bénéficient pleinement des interfaces partagées entre client et serveur.
• Outils et scripts : scripts d’automatisation, extensions de navigateur, applications de bureau.

Si vous venez d’un langage typé comme C#, vous retrouverez de nombreux repères : interfaces, génériques, enums, et le même éditeur. Notre guide sur C# avec Visual Studio Code montre d’ailleurs à quel point les deux univers se ressemblent.

Comment apprendre TypeScript efficacement ?

Avec de bonnes bases en JavaScript, voici le parcours que nous recommandons :

1. Jour 1 : installation, compilation avec tsc, types primitifs, inférence. Convertissez un petit script JavaScript existant.
2. Jours 2 et 3 : fonctions typées, paramètres optionnels et par défaut, tableaux, unions, tuples, enums.
3. Jours 4 et 5 : interfaces, alias de type, types imbriqués, rétrécissement de type.
4. Deuxième semaine : génériques, types utilitaires, tsconfig.json et organisation d’un projet complet en mode strict.
5. Ensuite : TypeScript dans votre framework (React, Node.js), puis typage des réponses d’API.

Pour un apprentissage guidé, la formation vidéo pour apprendre TypeScript de zéro d’EspritAcadémique couvre les fondamentaux en 2 h 15, sans prérequis. Vous y verrez notamment :

• l’intérêt de TypeScript et l’installation de VS Code et de Node.js ;
• l’écriture et la compilation de votre premier code ;
• les types primitifs, l’inférence, le typage des fonctions et les valeurs par défaut ;
• les alias de type, les tableaux, les unions, les tuples et les enums ;
• les interfaces et le choix entre interface et alias de type ;
• la configuration du fichier tsconfig.json et l’organisation des dossiers d’un projet.

En résumé

TypeScript ajoute à JavaScript un système de types vérifié avant l’exécution, puis se compile en JavaScript standard. Installez le compilateur, activez le mode strict, laissez l’inférence travailler, typez vos fonctions et vos données avec des unions et des interfaces, et utilisez les génériques pour le code réutilisable. Quelques jours suffisent pour écrire du TypeScript utile ; la maîtrise vient en l’appliquant à un vrai projet.