TypeScript c'est quoi ? Introduction pour débutants avec exemples

TypeScript, c'est quoi ? C'est JavaScript avec des types statiques. Vous ajoutez des annotations de type aux variables, aux paramètres et aux valeurs de retour, le compilateur TypeScript les vérifie avant que le programme ne s'exécute, puis il produit du JavaScript ordinaire, sans les types. Ce JavaScript tourne partout où tourne JavaScript : navigateurs, Node.js, Deno et Bun.

Voici un petit programme TypeScript. Cliquez sur Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Sortie :

Ada is 36 years old
82.33333333333333

À part ce qui suit les deux-points (: string, : User, : number[]) et l'interface, c'est du JavaScript. Ces ajouts indiquent au compilateur ce que chaque valeur a le droit d'être. Remarquez que total n'a pas d'annotation : TypeScript déduit tout seul que c'est un nombre. La plupart du code TypeScript annote les frontières des fonctions et laisse le compilateur inférer le reste.

Ce que le vérificateur de types détecte

Les annotations servent à faire apparaître les erreurs pendant que vous écrivez le code, et non quand un utilisateur tombe dessus. Exécutez ce bloc et lisez la sortie :

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Le programme ne démarre jamais. Le compilateur affiche deux erreurs à la place :

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Chaque erreur indique le fichier, la ligne et la colonne, un code d'erreur (TS2322) et le problème. En JavaScript pur, les deux lignes s'exécuteraient, et la seconde afficherait Linus is undefined years old sans le moindre avertissement. Dans un éditeur comme VS Code, les mêmes erreurs apparaissent en soulignement rouge pendant la frappe, avec une autocomplétion qui sait que user possède exactement un name et un age.

Bugs typiques détectés par le vérificateur :

• Un nom de propriété ou de méthode mal orthographié (user.nmae, list.lenght).
• Un appel de fonction avec trop peu ou trop d'arguments, ou des arguments du mauvais type.
• L'utilisation d'une valeur qui peut être null ou undefined sans vérification préalable.
• L'oubli d'un cas d'une union comme "loading" | "done" | "error", quand le code utilise une vérification exhaustive.
• Du code qui casse quand une fonction dont vous dépendez change de signature.

Les types disparaissent à l'exécution

Les types de TypeScript n'existent qu'à la compilation. Le compilateur les vérifie puis les supprime : le JavaScript qu'il émet ne contient ni annotations ni interfaces, et il s'exécute exactement comme du JavaScript écrit à la main.

Cette entrée :

function double(n: number): number {
    return n * 2;
}

devient cette sortie :

function double(n) {
    return n * 2;
}

TypeScript ne peut donc pas vérifier les valeurs qui arrivent pendant l'exécution. Ici, le texte JSON prétend être un User, le compilateur doit croire cette affirmation, et rien ne proteste non plus à l'exécution :

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Sortie :

string
thirty-six1

Les données venues de l'extérieur du programme (réponses d'API, saisies de formulaire, fichiers) ont besoin d'une vérification à l'exécution, par exemple une fonction type guard qui inspecte la valeur. TypeScript fait alors confiance à cette vérification et affine le type pour vous.

Qui a créé TypeScript, et pourquoi

TypeScript a été créé chez Microsoft, sous la direction d'Anders Hejlsberg (le concepteur de C#). Il a été rendu public en octobre 2012 en version 0.8, et la version 1.0 a suivi en avril 2014. Il est open source sous licence Apache 2.0 et développé sur GitHub. D'après le décompte des contributeurs mensuels de GitHub, TypeScript est devenu le langage le plus utilisé sur GitHub en août 2025, devant Python et JavaScript.

La motivation, c'étaient les grosses bases de code JavaScript. JavaScript n'a aucun moyen de dire « cette fonction reçoit un objet utilisateur » : renommer une propriété ou modifier une fonction voulait dire fouiller toute la base de code en espérant que les tests couvraient chaque appelant. TypeScript ajoute cette information tout en restant entièrement compatible avec JavaScript :

• C'est un sur-ensemble. Du JavaScript valide est une syntaxe TypeScript valide, un projet peut donc migrer fichier par fichier.
• Il suit JavaScript. Hormis quelques ajouts anciens comme enum et namespace, TypeScript n'ajoute aucune fonctionnalité d'exécution qui lui soit propre ; la nouvelle syntaxe vient du standard JavaScript.
• Les types ne coûtent rien à l'exécution. Ils sont effacés, donc le résultat est aussi rapide que du JavaScript écrit à la main.

La version majeure actuelle est TypeScript 7, dont le compilateur a été réécrit en Go sous forme de programme natif ; il vérifie les types des gros projets environ dix fois plus vite que le compilateur en JavaScript qu'il remplace. La page TypeScript 7 détaille ce qui a changé.

À quoi sert TypeScript ? Frontend et backend

TypeScript sert à écrire les mêmes logiciels que JavaScript, côté frontend comme côté backend. Comme le résultat est du JavaScript, TypeScript va partout où va JavaScript :

Le même langage couvre les deux côtés d'une application web, c'est pourquoi beaucoup d'équipes partagent des définitions de types (par exemple la forme d'une réponse d'API) entre le code serveur et le code navigateur.

Comment le code TypeScript devient du JavaScript

Il y a deux tâches distinctes, assurées par des outils différents :

1. La vérification des types. Seul le compilateur TypeScript la fait, généralement via la commande tsc (le deno check de Deno exécute une copie de ce même compilateur). Il lit vos fichiers .ts, signale les erreurs et, par défaut, écrit aussi les fichiers .js.
2. La suppression des types. tsc sait le faire, tout comme des outils plus rapides qui sautent complètement la vérification : esbuild, SWC, Babel, et le retrait des types intégré à Node.js, Deno et Bun.

Une configuration courante utilise un outil rapide pour exécuter le code et tsc --noEmit (vérifier seulement, ne rien écrire) dans l'éditeur et en CI. L'installation de tsc et l'exécution d'un fichier .ts ont chacune leur page dans ce chapitre.

Les fonctionnalités essentielles en un exemple

Le TypeScript de tous les jours repose sur un petit ensemble de fonctionnalités. Ce bloc réunit les principales :

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Sortie :

Ada ada@example.com
Ada can log in
Linus is banned

• Les annotations de type (name: string) indiquent ce que contient une variable, un paramètre, une propriété ou une valeur de retour.
• L'inférence de type complète les types que vous omettez : account reçoit son type de ce que renvoie first.
• Les interfaces et les alias de type (interface Account, type Status) donnent un nom à la forme de vos données.
• Les types union ("active" | "banned", T | undefined) décrivent une valeur qui peut être l'une de plusieurs choses.
• Le narrowing : après une vérification comme account !== undefined, le compilateur sait quel cas s'applique à l'intérieur du bloc.
• Les propriétés optionnelles (email?: string) peuvent être absentes, leur type inclut donc undefined.
• Les génériques (first<T>) permettent à une fonction ou à un type de fonctionner avec de nombreux types tout en les gardant liés : un tableau d'Account en entrée, un Account en sortie.

Faut-il apprendre JavaScript d'abord ?

C'est utile, mais vous pouvez apprendre les deux en même temps. Tout ce qui concerne le comportement du code TypeScript à l'exécution (variables, fonctions, objets, tableaux, promesses, classes) relève de JavaScript, et TypeScript ajoute une couche qui décrit ces valeurs. Si vous connaissez déjà JavaScript, la nouveauté est le système de types : annotations, interfaces, unions, génériques et narrowing. Si vous débutez dans les deux, commencez par les bases des valeurs et des fonctions JavaScript, puis ajoutez les types au fur et à mesure ; les messages d'erreur du compilateur sont un bon professeur, car ils désignent la ligne exacte où une valeur est mal utilisée.

Un ordre pratique pour apprendre TypeScript : installez-le et exécutez un premier fichier, apprenez les types de base et les types objet, puis les types union et le narrowing, et ensuite les fonctions et les génériques. Cela couvre l'essentiel du code applicatif.