TypeScript pour développeurs JavaScript : passer le cap

Pourquoi adopter TypeScript en 2025

JavaScript est flexible — parfois trop. Une faute de frappe dans un nom de propriété, un undefined inattendu, un objet qui change de forme selon le contexte... Ces bugs silencieux qui s'expriment seulement en production sont la principale raison d'adopter TypeScript.

TypeScript compile vers du JavaScript standard, est pris en charge nativement par VS Code et est aujourd'hui utilisé dans la majorité des projets professionnels.

Configuration initiale

npm install -D typescript ts-node @types/node
npx tsc --init

Configuration recommandée dans tsconfig.json :

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Les types essentiels

Types primitifs et tableaux

// Types de base
const nom: string = "Alice";
const age: number = 28;
const actif: boolean = true;

// Tableaux
const scores: number[] = [95, 87, 92];
const tags: Array<string> = ["seo", "web", "design"];

// Tuple (tableau à longueur et types fixes)
const coordonnees: [number, number] = [48.8566, 2.3522];

Interfaces vs Types

// Interface — idéale pour les objets et les classes
interface Utilisateur {
  id: number;
  nom: string;
  email: string;
  role?: "admin" | "user"; // Propriété optionnelle
  readonly createdAt: Date;  // Non modifiable
}

// Type alias — plus flexible, gère les unions et intersections
type Statut = "actif" | "inactif" | "suspendu";
type ResultatOuErreur<T> = { data: T; error: null } | { data: null; error: string };

Fonctions typées

// Paramètres et retour typés
function calculerRemise(prix: number, taux: number): number {
  return prix * (1 - taux / 100);
}

// Fonction générique
function premier<T>(tableau: T[]): T | undefined {
  return tableau[0];
}

const premierNom = premier(["Alice", "Bob"]); // Type inféré : string | undefined
const premierScore = premier([95, 87]);        // Type inféré : number | undefined

Les génériques en pratique

Les génériques permettent d'écrire du code réutilisable sans perdre la sécurité des types :

// Wrapper de réponse API générique
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface Article {
  id: number;
  titre: string;
  contenu: string;
}

async function fetchArticle(id: number): Promise<ApiResponse<Article>> {
  const response = await fetch(`/api/articles/${id}`);
  return response.json();
}

// TypeScript sait que result.data est un Article
const result = await fetchArticle(1);
console.log(result.data.titre); // ✅ Autorisé
console.log(result.data.auteur); // ❌ Erreur : 'auteur' n'existe pas sur 'Article'

Narrowing — affiner les types

type Animal = { type: "chien"; race: string } | { type: "chat"; poils: boolean };

function decrireAnimal(animal: Animal): string {
  if (animal.type === "chien") {
    return `Chien de race ${animal.race}`; // TypeScript sait que c'est un chien
  } else {
    return `Chat ${animal.poils ? "poilu" : "à poils ras"}`;
  }
}

Migration progressive depuis JavaScript

Vous n'avez pas besoin de tout réécrire. TypeScript accepte les fichiers .js en mode permissif :

{
  "compilerOptions": {
    "allowJs": true,        // Accepte les .js
    "checkJs": false,       // Ne vérifie pas les .js au début
    "strict": false         // Mode souple pour démarrer
  }
}

Migrez fichier par fichier : renommez .js en .ts, corrigez les erreurs, activez progressivement le mode strict.

Utilitaires de types intégrés

interface Produit {
  id: number;
  nom: string;
  prix: number;
  description: string;
}

// Partial — toutes les propriétés optionnelles
type MiseProduit = Partial<Produit>;

// Pick — sélectionner certaines propriétés
type CarteProduit = Pick<Produit, "id" | "nom" | "prix">;

// Omit — exclure certaines propriétés
type NouveauProduit = Omit<Produit, "id">;

// Record — dictionnaire typé
type Stock = Record<string, number>; // { "ref-123": 42, "ref-456": 0 }

Pourquoi TypeScript améliore votre quotidien

Après quelques semaines avec TypeScript, les développeurs ne veulent plus revenir en arrière. L'autocomplétion devient précise, les refactorings massifs sont sûrs, et les revues de code plus rapides. TypeScript est aujourd'hui le standard industriel.