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

> Découvrez TypeScript de zéro : installation, types, inférence, unions, interfaces, génériques et tsconfig.json, avec une comparaison claire face à JavaScript.

- URL : https://guides-numeriques.fr/developpement/apprendre-typescript/
- Thématique : Développement web & mobile
- Mis à jour : 2026-09-26
- Formation associée : [Cours pour apprendre TypeScript complète : de débutant à expert](https://espritacademique.com/formations/cours-pour-apprendre-typescript-complete-de-debutant-a-expert/)

## L'essentiel

- TypeScript est un sur-ensemble de JavaScript développé par Microsoft : il ajoute un système de types vérifié avant l'exécution, puis se compile en JavaScript standard.
- Tout code JavaScript valide est aussi du TypeScript valide, ce qui permet de migrer un projet fichier par fichier.
- Grâce à l'inférence, TypeScript devine la plupart des types tout seul : on annote surtout les paramètres de fonctions et les structures de données.
- Les interfaces et les alias de type décrivent la forme des objets ; les génériques permettent d'écrire des fonctions réutilisables sans perdre l'information de type.
- Le fichier tsconfig.json configure le compilateur ; l'option strict, activée dès le départ, détecte le plus grand nombre d'erreurs.

**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 :

```typescript
// 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](https://guides-numeriques.fr/developpement/apprendre-javascript/).


**Schéma — TypeScript vs JavaScript : les différences essentielles**

| JavaScript | TypeScript |
|---|---|
| Typage dynamique, vérifié à l'exécution | Typage statique, vérifié avant l'exécution |
| Exécution directe, sans compilation | Compilation en JavaScript nécessaire |
| Erreurs de type parfois en production | Erreurs signalées dans l'éditeur |
| Scripts courts et prototypes | Projets moyens ou grands, en équipe |


## Apprendre TypeScript : les étapes pour démarrer


**Schéma — Apprendre TypeScript : les étapes pour démarrer**

1. **Installer les outils** : Node.js LTS, VS Code, npm install typescript
2. **Compiler un fichier** : index.ts compilé avec npx tsc index.ts
3. **Types et fonctions** : Types primitifs, inférence, paramètres typés
4. **Unions et interfaces** : Unions, tuples, enums, interface et type
5. **Génériques** : Code réutilisable pour plusieurs types
6. **Configurer tsconfig.json** : npx tsc --init, option strict activée


### É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 :

```bash
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` :

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

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

```bash
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 :

```typescript
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

```typescript
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

```typescript
// 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*).

```typescript
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.

```typescript
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`.

```typescript
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 :

```bash
npx tsc --init
```

Puis adaptez ses options principales :

```json
{
  "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.

> **Formation recommandée** : [Cours pour apprendre TypeScript complète : de débutant à expert](https://espritacademique.com/formations/cours-pour-apprendre-typescript-complete-de-debutant-a-expert/) — 2h15 de vidéo, 44 €.

## 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](https://guides-numeriques.fr/developpement/git-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](https://guides-numeriques.fr/developpement/react-nextjs/), 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](https://guides-numeriques.fr/developpement/vs-code-csharp-vbnet/) 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](https://espritacademique.com/formations/cours-pour-apprendre-typescript-complete-de-debutant-a-expert/) 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.

## Sources et documentation officielle

- [The TypeScript Handbook (documentation TypeScript)](https://www.typescriptlang.org/docs/handbook/intro.html)
- [Everyday Types (documentation TypeScript)](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
- [TSConfig Reference (documentation TypeScript)](https://www.typescriptlang.org/tsconfig/)

## Questions fréquentes

### Faut-il apprendre JavaScript avant TypeScript ?

Oui. TypeScript ne remplace pas JavaScript : il s'ajoute par-dessus. Toute la logique (variables, conditions, boucles, fonctions, objets, DOM) reste celle de JavaScript, et le code compilé est du JavaScript. Maîtriser d'abord les bases de JavaScript permet de distinguer ce qui relève du langage et ce qui relève du typage, et rend TypeScript beaucoup plus facile à assimiler.

### TypeScript est-il plus lent que JavaScript ?

Non, pas à l'exécution. Les types sont supprimés lors de la compilation : le navigateur ou Node.js exécutent du JavaScript classique, sans surcoût. La seule différence porte sur le développement, avec une étape de compilation et de vérification des types, généralement très rapide et automatisée par les outils comme Vite ou Next.js.

### Quelle est la différence entre any et unknown en TypeScript ?

Les deux acceptent n'importe quelle valeur. Mais any désactive toute vérification : vous pouvez appeler n'importe quelle méthode, au risque d'une erreur à l'exécution. unknown oblige à vérifier le type avant utilisation, par exemple avec typeof. Préférez unknown pour les données dont vous ignorez la forme, comme une réponse d'API.

### Peut-on utiliser TypeScript avec React ?

Oui, et c'est très courant. Les outils de création de projet comme Vite ou create-next-app proposent un modèle TypeScript prêt à l'emploi. Les fichiers de composants prennent l'extension .tsx, et l'on type les props avec une interface ou un alias de type. L'éditeur signale alors immédiatement une prop manquante ou mal typée.

### Combien de temps faut-il pour apprendre TypeScript ?

Avec de bonnes bases en JavaScript, quelques jours suffisent pour écrire du TypeScript utile : types primitifs, fonctions typées, interfaces, unions. Comptez deux à quatre semaines de pratique sur un vrai projet pour être à l'aise avec les génériques, le rétrécissement de types et la configuration du compilateur. Les types avancés s'apprennent ensuite au fil des besoins.

### TypeScript empêche-t-il tous les bugs ?

Non. TypeScript détecte les erreurs de types avant l'exécution : propriété inexistante, argument oublié, valeur possiblement nulle. Il ne vérifie ni la logique métier ni les données reçues à l'exécution, par exemple une réponse d'API mal formée. Il réduit fortement une catégorie de bugs, mais ne remplace ni les tests ni la validation des données externes.