TypeScript : le guide complet pour les développeurs qui veulent passer de JavaScript à TypeScript

Pourquoi TypeScript a conquis le développement web

Si tu développes en JavaScript depuis un moment, tu as sûrement déjà vécu ça : une erreur undefined is not a function en plein milieu de la nuit, une propriété mal orthographiée qui passe inaperçue jusqu’en production, ou un refactoring qui tourne au cauchemar parce que tu ne sais jamais quel type de donnée circule dans ta fonction. TypeScript résout précisément ces problèmes — et c’est pourquoi il est devenu le standard incontournable du développement web moderne.

TypeScript est un sur-ensemble typé de JavaScript développé par Microsoft. Concrètement, tout code JavaScript valide est aussi du TypeScript valide. La différence ? TypeScript ajoute un système de types qui te permet de détecter les erreurs à la compilation plutôt qu’à l’exécution. Résultat : des bugs rattrapés des heures (voire des jours) avant la mise en production.

Selon le Stack Overflow Survey 2025, TypeScript est utilisé par plus de 60 % des développeurs JavaScript et se classe dans le top 5 des langages les plus adoptés. Des géants comme Google (Angular), Microsoft (VS Code), Airbnb et Asana l’ont adopté en standard. Ce n’est pas une mode — c’est l’évolution naturelle de JavaScript.

Ce que TypeScript apporte à ton développement quotidien

Avant d’entrer dans le code, prenons le temps de comprendre pourquoi TypeScript change la donne dans un projet réel.

❌ Le problème JavaScript nu

function calculatePrice(product, quantity) {
  return product.price * quantity;
}

// Appels dangereux — aucun avertissement
calculatePrice(undefined, "deux");  // NaN silencieux
calculatePrice({ name: "Livre" }, 3); // NaN (price n'existe pas)

Ces bugs passent en production parce que JavaScript n’a aucun moyen de vérifier ce que tu lui passes. En équipe, c’est pire : tu ne sais jamais quelle forme a un objet, quelles propriétés sont optionnelles, et ce que retourne une fonction donnée.

✅ TypeScript résout tout ça

interface Product {
  name: string;
  price: number;
  inStock: boolean;
}

function calculatePrice(product: Product, quantity: number): number {
  return product.price * quantity;
}

// ❌ Erreur détectée à la compilation :
// Argument of type 'undefined' is not assignable to parameter of type 'Product'
calculatePrice(undefined, "deux");

// ❌ Erreur : 'price' manque dans l'objet
calculatePrice({ name: "Livre" }, 3);

TypeScript te signale l’erreur directement dans ton éditeur, avant même d’exécuter le code. Le gain de temps est considérable : des études estiment que TypeScript réduit les bugs de production de 15 à 20 %.

Les bases essentielles pour démarrer

Voici tout ce que tu dois savoir pour commencer à écrire du TypeScript dès aujourd’hui.

Installation et configuration

C’est aussi simple que deux commandes :

# Installation globale
npm install -g typescript

# Compiler un fichier
tsc mon-fichier.ts

Pour un projet, un fichier tsconfig.json te permet de configurer le compilateur :

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

L’option strict: true est celle qui te protège le plus. Active-la dès le début — elle t’évitera des heures de débogage.

Les types de base

// Types primitifs
let nom: string = "Alice";
let age: number = 28;
let estActif: boolean = true;

// Tableaux
let scores: number[] = [85, 92, 78];
let fruits: Array<string> = ["pomme", "banane"];

// Tuples (tableaux de longueur fixe)
let coordonnees: [number, number] = [12.5, 45.8];

// Unions : un type OU un autre
let identifiant: string | number;
identifiant = "ABC123";  // OK
identifiant = 42;        // OK
identifiant = true;      // ❌ Erreur

// Les alias de types
type UserID = string | number;
let userId: UserID = "user_abc";

Les interfaces — ton outil le plus puissant

Les interfaces décrivent la forme d’un objet. C’est ce qui rend TypeScript si utile dans les projets réels :

interface User {
  id: number;
  email: string;
  name: string;
  phone?: string;       // ? = optionnel
  readonly createdAt: Date;  // lecture seule
}

interface AdminUser extends User {
  role: "admin" | "superadmin";
  permissions: string[];
}

function greet(user: User): string {
  return `Bonjour ${user.name} !`;
}

const alice: AdminUser = {
  id: 1,
  email: "alice@exemple.fr",
  name: "Alice",
  createdAt: new Date(),
  role: "admin",
  permissions: ["read", "write"]
};

console.log(greet(alice)); // Bonjour Alice !

Les types génériques — la flexibilité sans perdre la sécurité

Parfois tu as besoin d’une fonction qui fonctionne avec plusieurs types tout en gardant la sécurité du typage. Les génériques sont faits pour ça :

// Fonction générique — T est un paramètre de type
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const first = firstElement([1, 2, 3]);     // number
const firstStr = firstElement(["a", "b"]); // string
// TypeScript INFÈRE le type automatiquement

// Une classe générique
class Repository<T> {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  getAll(): T[] {
    return [...this.items];
  }
}

const userRepo = new Repository<User>();
userRepo.add(alice);  // TypeScript vérifie que c'est bien un User

Les utilitaires TypeScript intégrés

TypeScript fournit des types utilitaires qui évitent d’écrire du code répétitif :

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

// Partial — rend toutes les propriétés optionnelles
function updateProduct(id: number, updates: Partial<Product>) {
  // Parfait pour les PATCH API
}

// Pick — sélectionne certaines propriétés
type ProductSummary = Pick<Product, "id" | "name" | "price">;

// Omit — supprime certaines propriétés
type ProductInput = Omit<Product, "id">;  // id en moins

// Record — dictionnaire typé
const inventory: Record<string, number> = {
  "pomme": 45,
  "banane": 30
};

TypeScript en pratique : un exemple complet

Voici un mini-projet qui combine tout ce qu’on vient de voir — un gestionnaire de panier d’achat :

// types.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  category: "food" | "electronics" | "clothing";
}

export interface CartItem {
  product: Product;
  quantity: number;
}

// cart.ts
export class ShoppingCart {
  private items: CartItem[] = [];

  addItem(product: Product, quantity: number = 1): void {
    const existing = this.items.find(
      item => item.product.id === product.id
    );

    if (existing) {
      existing.quantity += quantity;
    } else {
      this.items.push({ product, quantity });
    }
  }

  removeItem(productId: string): void {
    this.items = this.items.filter(
      item => item.product.id !== productId
    );
  }

  getTotal(): number {
    return this.items.reduce(
      (total, item) => total + item.product.price * item.quantity,
      0
    );
  }

  getSummary(): string {
    return this.items
      .map(item => `${item.product.name} x ${item.quantity}`)
      .join(", ");
  }
}

// main.ts
const cart = new ShoppingCart();

const apple: Product = {
  id: "p1",
  name: "Pomme",
  price: 1.50,
  category: "food"
};

const phone: Product = {
  id: "p2",
  name: "Téléphone",
  price: 299,
  category: "electronics"
};

cart.addItem(apple, 3);
cart.addItem(phone, 1);
console.log(cart.getTotal()); // 303.50
console.log(cart.getSummary()); // "Pomme x 3, Téléphone x 1"

Ce gestionnaire est entièrement typé : impossible d’ajouter un objet sans le bon format, impossible de modifier une quantité par une chaîne de caractères, et l’autocomplétion de ton IDE te guide à chaque étape.

Intégrer TypeScript dans un projet existant

Pas besoin de tout réécrire pour bénéficier de TypeScript. La migration est progressive :

1. Renommer un fichier .js en .ts
2. Ajouter // @ts-check en haut d’un fichier JS pour activer la vérification sans le convertir
3. Configurer allowJs: true dans tsconfig.json pour cohabiter avec du JS legacy
4. Définir strict: false temporairement, puis l’activer progressivement fichier par fichier
5. Utiliser des fichiers .d.ts pour décrire les types des bibliothèques externes sans les modifier

React, Next.js, Vue 3, Svelte, NestJS — tous les frameworks modernes supportent TypeScript nativement. Quand tu crées un projet avec create-react-app ou create-next-app, ajoute simplement l’option --typescript.

Les pièges à éviter quand tu débutes

Même avec TypeScript, certains pièges sont faciles à éviter si tu les connais :

⚠️ Le any — l’anti-type

Quand tu ne sais pas quel type utiliser, la tentation est grande d’écrire any. Problème : any désactive totalement la vérification de type. C’est comme ne pas porter ta ceinture de sécurité. Privilégie unknown (qui oblige à vérifier le type avant d’utiliser la valeur) ou un type union.

// À éviter
function process(data: any) {
  return data.something;  // Aucune vérification !
}

// Recommandé
function process(data: unknown) {
  if (typeof data === "object" && data !== null && "something" in data) {
    return (data as Record<string, unknown>).something;
  }
  return null;
}

⚠️ L’inférence de type — ne surajoute pas des annotations

TypeScript infère automatiquement le type d’une variable initialisée. Inutile d’écrire :

// Redondant — TypeScript voit déjà que c'est un string
const message: string = "Bonjour";

// Parfait — l'inférence fait le travail
const message = "Bonjour";

⚠️ as — le cast sauvage

Le mot-clé as force un type. Utilisé trop souvent, il vide TypeScript de son intérêt. Ne l’utilise que quand tu ES certain du type et que TypeScript ne peut pas le déduire (par exemple avec JSON.parse).

Et après ? Passer à la vitesse supérieure

Une fois que tu maîtrises les bases de TypeScript, voici les prochains sujets à explorer :

• TypeScript avec React — les props typés, les hooks génériques, les event handlers
• Les types conditionnels (extends, infer) pour créer des types dynamiques
• Les template literal types pour construire des types à partir de chaînes
• Les décorateurs (utile avec Angular et NestJS)

TypeScript n’est pas une langue étrangère — c’est JavaScript avec des super-pouvoirs. Les premiers jours, le compilateur va te sembler exigeant, mais tu réaliseras vite que chaque erreur qu’il rattrape est un bug qui n’atteindra jamais tes utilisateurs.

Alors, prêt à faire le saut ? Lance ton terminal, installe TypeScript, crée ton premier fichier .ts, et laisse le compilateur devenir ton meilleur allié.

Photo de Kevin Ku sur Pexels.