TypeScript

Qu'est-ce que TypeScript ?

TypeScript est un sur-ensemble typé de JavaScript développé et maintenu par Microsoft. Il ajoute le typage statique au JavaScript tout en restant entièrement compatible avec le JavaScript existant. Le code TypeScript est compilé en JavaScript avant d'être exécuté.

En essence, TypeScript = JavaScript + Typage statique + Fonctionnalités avancées.

Vous écrivez en TypeScript, la compilation produit du JavaScript standard que les navigateurs et serveurs comprennent. Cette approche combine la flexibilité de JavaScript avec la sécurité et les outils des langages fortement typés.

TypeScript vs JavaScript

JavaScript classique

JavaScript est dynamiquement typé : le type d'une variable est déterminé au runtime et peut changer.

let user = "Alice";  // String
user = 42;           // Maintenant un nombre - OK
user = { name: "Bob" }; // Maintenant un objet - OK

Cette flexibilité est puissante pour la prototypage rapide mais peut causer des bugs imprévisibles dans les grandes applications.

TypeScript avec typage statique

TypeScript force le typage explicite :

let user: string = "Alice";
user = 42; // ERREUR : Type 'number' is not assignable to type 'string'
user = { name: "Bob" }; // ERREUR : Type '{ name: string }' is not assignable

Le compilateur TypeScript attrape ces erreurs avant l'exécution, lors du développement. C'est extraordinairement puissant pour prévenir les bugs.

Système de types de TypeScript

Types primitifs

TypeScript supporte tous les types primitifs de JavaScript plus des extensions :

let isActive: boolean = true;
let count: number = 42;
let message: string = "Hello";
let nothing: null = null;
let undefinedValue: undefined = undefined;
let symbol: symbol = Symbol("unique");
let big: bigint = 9007199254740991n;

Types union

Permettent une variable d'être un parmi plusieurs types :

let id: string | number;
id = "ABC123";  // OK
id = 42;        // OK
id = true;      // ERREUR

Cette approche est plus flexible que un type strict tout en maintenant la sécurité.

Types littéraux

Restreindre une variable à des valeurs spécifiques :

let status: "active" | "inactive" | "pending";
status = "active";  // OK
status = "deleted"; // ERREUR

Très utile pour les énumérations et les états finis.

Interfaces

Les interfaces définissent la forme des objets :

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin?: boolean; // Propriété optionnelle
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
  // isAdmin est optionnel
};

Les interfaces sont essentielles pour structurer les données et définir les contrats entre composants.

Types alias

Créer des alias pour des types complexes :

type Point = { x: number; y: number };
type Color = "red" | "green" | "blue";
type Callback = (data: string) => void;

const point: Point = { x: 10, y: 20 };

Classes et héritage

TypeScript supporte les classes avec typage :

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log("Some sound");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Woof!");
  }
}

Génériques

Permettre des fonctions et classes réutilisables avec typage :

function identity<T>(value: T): T {
  return value;
}

const num = identity(42);        // T est number
const str = identity("hello");   // T est string

interface Container<T> {
  value: T;
  getValue(): T;
}

Les génériques sont puissants pour créer du code réutilisable tout en maintenant la sécurité des types.

Énumérations

Définir un ensemble de constantes nommées :

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING"
}

let userStatus: Status = Status.Active;

Les énums rendent le code plus lisible et préviennent les erreurs de typage pour les valeurs énumérées.

Avantages de TypeScript

1. Détection d'erreurs précoce

Le compilateur TypeScript attrape les erreurs lors du développement, pas en production. Cela réduit dramatiquement les bugs :

const user = { name: "Alice", age: 30 };
console.log(user.agee);  // ERREUR détectée immédiatement

Sans TypeScript, cet accès à une propriété inexistante passerait inaperçu jusqu'à l'exécution.

2. Support IDE amélioré

Les éditeurs modernes (VS Code, WebStorm) offrent une meilleure autocomplétion, refactoring et navigation grâce aux types :

• Autocomplétion intelligente des propriétés et méthodes
• Détection du type de variable en hover
• Refactoring sécurisé (renommer une variable partout)
• Go to definition efficace
• Détection de code mort

Cela augmente dramatiquement la productivité, particulièrement dans les grandes bases de code.

3. Documentation automatique

Les types servent de documentation. Au lieu de commenter « cette fonction prend un string et retourne un nombre », le type l'indique explicitement :

// Sans TypeScript - documentation vague
function processData(data, options) {
  // ...
}

// Avec TypeScript - documentation claire et appliquée
function processData(
  data: string,
  options: ProcessOptions
): number {
  // ...
}

4. Refactoring sécurisé

Changer une structure de données ? TypeScript vous indique partout où le code se casse. En JavaScript, vous découvrez les problèmes au runtime.

5. Meilleure maintenabilité

Le code TypeScript est plus facile à comprendre et maintenir pour les autres développeurs. Les types servent comme contrat que le code doit respecter.

6. Moins de tests superficiels

Avec TypeScript, certains tests unitaires vérifiant les types deviennent inutiles. Vous pouvez vous concentrer sur la logique métier.

Écosystème TypeScript

Adoption dans les frameworks

TypeScript est maintenant dominant dans l'écosystème JavaScript :

Angular : Entièrement construit sur TypeScript, c'est le framework le plus typé.

React : Widement utilisé avec TypeScript. Les équipes React modernes utilisent généralement TypeScript.

Vue/Nuxt : Support excellent de TypeScript. Vue 3 est écrit en TypeScript et recommande TypeScript.

Next.js : Framework React full-stack avec support TypeScript de première classe.

NestJS : Framework backend Node.js construit sur TypeScript pour les applications scalables.

Express.js : Peut être utilisé avec TypeScript pour des APIs fortement typées.

Outils et librairies

• tsc : Le compilateur TypeScript officiel
• ts-node : Exécute du TypeScript directement en Node.js
• Vite : Bundler moderne avec support TypeScript natif
• Webpack : Avec ts-loader ou babel-loader
• ESLint + Prettier : Linting et formatting pour TypeScript
• Jest : Framework de test compatible TypeScript

Migration de JavaScript vers TypeScript

Démarrer progressivement

Vous n'avez pas besoin de tout réécrire. TypeScript supporte la migration progressive :

1. Ajouter tsconfig.json : Configuration du compilateur
2. Renommer les fichiers : .js en .ts
3. Ajouter des types graduellement : Commencer par les fichiers critiques
4. Utiliser any temporairement : Pour les parties non encore typées

// Migration progressive - types partiels
let user: any = getUserFromAPI(); // Temporaire
let count: number = 0;            // Typé
let messages: string[] = [];       // Typé

Outils de migration

• TypeScript CLI : tsc --init pour initialiser un projet
• TSLint → ESLint : Linting TypeScript
• Type definitions : DefinitelyTyped fournit des types pour les librairies JS populaires

Quand utiliser TypeScript

Excellentes situations pour TypeScript

• Applications grandes : > 1000 lignes de code
• Équipes multiples : Clarté pour les collaborateurs
• Code critique : Systèmes financiers, médicaux, sécurité
• APIs publiques : Les types servent de contrat API
• Codebases long-terme : Maintenabilité améliorée
• Frameworks modernes : React, Vue, Angular

Situations où JavaScript simple suffit

• Scripts simples : Utils de 100 lignes
• Prototypes rapides : Proof of concepts
• Petits projets personnels : Pas besoin de surcomplexité
• Équipes très petites : Outils simples suffisent

En pratique, pour tout projet professionnel de taille, TypeScript vaut largement l'investissement initial.

Bonnes pratiques TypeScript

Éviter any

any désactive complètement la vérification des types. À éviter autant que possible :

// ❌ Mauvais
let data: any = fetchData();
data.method(); // Aucune vérification

// ✅ Bon
interface DataResponse {
  method: () => void;
}
let data: DataResponse = fetchData();
data.method(); // Vérifié

Utiliser les types stricts

Activer les options strictes dans tsconfig.json :

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

Ces options forcent à être explicit, réduisant les bugs.

Interfaces plutôt que types (en général)

Pour les objets, préférer les interfaces aux types :

// Préféré pour les objets
interface User {
  id: number;
  name: string;
}

// Types alias plutôt pour les unions
type Status = "active" | "inactive";

Générer les types à partir de l'API

Au lieu de typer manuellement, générer les types à partir de votre API OpenAPI :

# Générer les types TypeScript à partir du schema OpenAPI
openapi-generator-cli generate -i api.yaml -g typescript

Performance et déploiement

Compilation TypeScript

TypeScript se compile en JavaScript standard avant déploiement. Le runtime JavaScript n'a pas besoin de connaître TypeScript.

Impact en production

• Taille du bundle : TypeScript n'ajoute rien au bundle final (seulement les commentaires de type sont supprimés)
• Performance runtime : Identique au JavaScript équivalent
• DevTools : Source maps permettent de déboguer le TypeScript original
• Déploiement : Deploy le JavaScript compilé, pas le TypeScript

L'avenir de TypeScript

TypeScript continue de croître et évoluer :

• Intégration native dans browsers : Support natif possible (actuellement compilé)
• Amélioration du système de types : Features plus avancées
• Performance du compilateur : Compilation plus rapide
• Standardisation ES : Certains types TypeScript pourraient devenir standards JavaScript

TypeScript s'est établi comme le standard de facto pour le développement JavaScript moderne. Pour les équipes sérieuses, pour les applications complexes, et pour le code qui doit être maintenu longtemps, TypeScript offre une amélioration significative en qualité, maintenabilité et expérience développeur. L'investissement initial pour apprendre TypeScript se rembourse rapidement dans les projets de taille.