Qu'est-ce que TypeScript ? Bases et passage depuis JavaScript

Si tu te demandes ce qu'est TypeScript, la réponse courte est la suivante : c'est un langage open source créé par Microsoft qui ajoute un système de types statiques par-dessus JavaScript. Tout code JavaScript valide est aussi un code TypeScript valide ; en ajoutant des types, tu détectes les bugs dans ton éditeur, avant même que le code ne s'exécute. Dans ce guide, tu apprendras les bases du système de types, l'utilisation des interface, et comment ajouter TypeScript à un projet existant de façon progressive.

Ce qu'est TypeScript et pourquoi il existe

JavaScript est typé dynamiquement : une variable peut être du texte à un instant et un nombre l'instant d'après. Dans de petits scripts, cette souplesse est pratique, mais à mesure qu'un projet grandit, des erreurs comme « undefined is not a function » explosent à l'exécution, juste devant l'utilisateur. TypeScript attrape ces bugs à la compilation.

TypeScript lui-même ne s'exécute pas dans le navigateur. Le tsc (TypeScript Compiler) transpile ton code en JavaScript pur, et les types sont effacés de cette sortie. Les types appartiennent entièrement à la phase de développement ; ils n'ajoutent aucun coût en production.

function saluer(nom: string): string {
  return `Bonjour, ${nom}`;
}

saluer("Aslain"); // OK
saluer(42);        // Erreur : le type 'number' n'est pas assignable à 'string'

Les types de base

Les types primitifs que tu utiliseras le plus sont les mêmes qu'en JavaScript : string, number, boolean. S'y ajoutent les tableaux, null, undefined et le type spécial any.

let titre: string = "Blog";
let lecture: number = 5;
let publie: boolean = true;
let tags: string[] = ["web", "typescript"];

// Tuple : longueur et ordre fixes
let coordonnee: [number, number] = [41.0, 28.9];

Un point important : la plupart du temps, tu n'as pas à écrire le type à la main. TypeScript fait de l'inférence de types. Quand tu écris let lecture = 5, le compilateur sait déjà que c'est un number. Réserve les annotations explicites surtout aux paramètres et aux valeurs de retour des fonctions.

Évite autant que possible le type any ; il signifie « désactive la vérification de types » et anéantit tout l'intérêt de TypeScript. Quand tu ne connais vraiment pas le type, utilise le type plus sûr unknown : il t'oblige à effectuer une vérification avant d'utiliser la valeur.

Modeler les objets avec interface et type

Dans de vraies applications, tu décris surtout la forme des objets. Deux outils existent pour cela : interface et type. Définissons un utilisateur :

interface Utilisateur {
  id: number;
  nom: string;
  email: string;
  role?: "admin" | "membre"; // ? = champ optionnel
}

const u: Utilisateur = {
  id: 1,
  nom: "Aslain",
  email: "hello@aslain.dev",
};

Ici, le champ role? est optionnel, et "admin" | "membre" est un type union qui indique que la valeur ne peut être que l'une de ces deux chaînes. Écris une autre chaîne et le compilateur t'avertit.

interface et type sont interchangeables dans la plupart des cas. Règle pratique : préfère interface pour les formes d'objets et type pour les unions et les alias. Un avantage de interface est qu'elle peut être étendue par héritage :

interface Auteur extends Utilisateur {
  nombrePublications: number;
}

Fonctions et génériques

Annoter les paramètres et la valeur de retour d'une fonction fait que le code se documente lui-même. Quand tu veux réutiliser la même logique sur différents types, les génériques entrent en jeu :

function premierElement<T>(tableau: T[]): T | undefined {
  return tableau[0];
}

const nombre = premierElement([1, 2, 3]);    // type : number
const texte = premierElement(["a", "b"]);    // type : string

Ici, T est un paramètre de remplacement. Quel que soit le type de tableau avec lequel tu appelles la fonction, le type de retour s'y adapte. Les génériques sont la base de structures comme Array et Promise<T>, et ils marient sûreté de typage et flexibilité.

Adopter TypeScript progressivement dans un projet existant

La plus grande force de TypeScript est que tu n'as pas à convertir un projet JavaScript existant d'un seul coup. La migration peut se faire étape par étape :

• 1. Installer et configurer. Lance npm install --save-dev typescript, puis npx tsc --init pour créer un tsconfig.json.
• 2. Commencer souple. Démarre avec "strict": false et "allowJs": true pour que TypeScript cohabite avec tes fichiers .js existants.
• 3. Convertir fichier par fichier. Renomme un fichier en .ts, corrige ses erreurs de type, puis passe au suivant.
• 4. Resserrer. À mesure que le projet se stabilise, passe à "strict": true ; cela active toutes les vérifications strictes, dont strictNullChecks, qui attrape le plus de bugs.

Un bon point de départ pour tsconfig.json :

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

Pour les bibliothèques tierces, les paquets @types/... fournissent généralement les définitions de types (par exemple npm i -D @types/node). Beaucoup de bibliothèques modernes livrent leurs définitions de types dans le paquet lui-même, sans rien d'autre à installer.

Questions fréquentes

Dois-je connaître JavaScript avant d'apprendre TypeScript ?

Oui. TypeScript est une couche par-dessus, pas un langage séparé. Si tu maîtrises les bases de JavaScript comme les fonctions, la portée, async/await et les objets, la couche de types s'assimile très vite. Sans une base solide en JavaScript, les erreurs de type sont difficiles à comprendre.

TypeScript ralentit-il mon projet ?

Pas à l'exécution ; les types sont effacés à la compilation et le code de production est du JavaScript pur. Le seul coût ajouté est l'étape de build, qui prend quelques secondes avec les outils modernes et évite en retour un grand nombre de bugs.

Utiliser any est-il interdit ?

Pas interdit, mais ça doit rester un dernier recours. C'est utile pour contourner temporairement un type, mais un usage permanent de any désactive la vérification de types. Quand tu ne connais pas le type, préfère des alternatives plus sûres comme unknown, ou Record<string, T> pour les objets flexibles.

Tu veux passer à une base typée et sûre ? Pour migrer ton projet JavaScript existant vers TypeScript ou bâtir une application typée de zéro, contacte-moi et posons ensemble des fondations solides.