Introduction à TypeScript

1. Objectifs

   • Comprendre ce que TypeScript ajoute à JavaScript et pourquoi il est utilisé en entreprise.
   • Typer des variables, des fonctions, des tableaux et des objets (interfaces, types, unions).
   • Installer TypeScript, configurer tsconfig.json et lire les erreurs du compilateur.
   • Exécuter du TypeScript avec Node.js et l'utiliser dans un projet Vite.

2. Qu'est-ce que TypeScript ?

   • TypeScript est un langage créé par Microsoft en 2012. C'est un sur-ensemble de JavaScript : tout code JavaScript est du TypeScript valide, auquel on ajoute des annotations de type.
   • Le navigateur ne comprend pas TypeScript : le code est vérifié puis transformé en JavaScript (on dit « transpilé ») avant d'être exécuté.
   • Son intérêt : détecter les erreurs pendant l'écriture, avant que l'utilisateur ne les rencontre. VS Code s'en sert aussi pour l'autocomplétion et le renommage.
   • Angular est entièrement écrit en TypeScript, et la plupart des projets React et Vue professionnels l'utilisent.
   • En 2026, TypeScript 7 a remplacé le compilateur écrit en JavaScript par un compilateur natif (réécrit en langage Go), environ dix fois plus rapide sur les gros projets. Pour vous, la syntaxe ne change pas.

   

3. Le même bug en JavaScript et en TypeScript

// JavaScript : aucune alerte, le bug apparaît seulement à l'exécution
function calculerMoyenne(notes) {
  return notes.reduce((a, b) => a + b, 0) / notes.length;
}
calculerMoyenne("15"); // TypeError: notes.reduce is not a function

// TypeScript : l'erreur est signalée dès l'écriture, en rouge dans VS Code
function calculerMoyenne(notes: number[]): number {
  return notes.reduce((a, b) => a + b, 0) / notes.length;
}
calculerMoyenne("15");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number[]'.

4. Les types de base

let nom: string = "Sami";
let age: number = 19;
let estInscrit: boolean = true;
let notes: number[] = [14, 15, 9];
let groupes: Array<string> = ["DEV101", "DEV102"];

// L'inférence : TypeScript devine le type, inutile de l'écrire partout
let ville = "Sfax";   // string
ville = 42;           // error TS2322: Type 'number' is not assignable to type 'string'.

// Union : plusieurs types possibles, ou une liste de valeurs autorisées
let identifiant: number | string = 105;
let niveau: "débutant" | "intermédiaire" | "avancé" = "débutant";

// any désactive la vérification : à éviter. unknown oblige à vérifier le type avant usage.
let donnee: unknown = JSON.parse('{"x": 1}');

5. Typer les fonctions

// Paramètres et valeur de retour
function formaterNote(note: number, sur: number = 20): string {
  return `${note.toFixed(2)} / ${sur}`;
}

// Paramètre facultatif (?) et fonction sans valeur de retour (void)
function saluer(prenom: string, titre?: string): void {
  console.log(`Bonjour ${titre ?? ""} ${prenom}`.trim());
}

// Fonction fléchée
const doubler = (n: number): number => n * 2;

6. Décrire des objets : interface et type

interface Stagiaire {
  nom: string;
  groupe: string;
  notes: number[];
  email?: string;
}

type Decision = "Admis" | "Ajourné";

const SEUIL_ADMISSION = 10;

function calculerMoyenne(notes: number[]): number {
  if (notes.length === 0) {
    return 0;
  }
  const total = notes.reduce((somme, note) => somme + note, 0);
  return total / notes.length;
}

function obtenirDecision(moyenne: number): Decision {
  return moyenne >= SEUIL_ADMISSION ? "Admis" : "Ajourné";
}

const sami: Stagiaire = { nom: "Sami", groupe: "DEV101", notes: [14, 15, 9] };
const moyenne = calculerMoyenne(sami.notes);
console.log(`${sami.nom} : ${moyenne.toFixed(2)} → ${obtenirDecision(moyenne)}`);

• Une interface décrit la forme d'un objet ; ? rend une propriété facultative.
• Un alias type peut nommer n'importe quel type, notamment une union : type Decision = "Admis" | "Ajourné".
• Si on oublie une propriété obligatoire, qu'on se trompe de type ou de nom, le compilateur le signale :

const rim: Stagiaire = { nom: "Rim", groupe: "DEV101", notes: ["17", 16] };
// error TS2322: Type 'string' is not assignable to type 'number'.
console.log(rim.prenom);
// error TS2339: Property 'prenom' does not exist on type 'Stagiaire'.

// T est un « type paramètre » : la fonction marche pour n'importe quel tableau
function premier<T>(liste: T[]): T | undefined {
  return liste[0];
}

const n = premier([14, 15, 9]);       // number | undefined
const s = premier(["Sami", "Rim"]);   // string | undefined

8. Installer et configurer TypeScript

npm install --save-dev typescript
npx tsc --version   # Version 7.0.x

• Le fichier tsconfig.json règle le compilateur. Une configuration simple pour vérifier des fichiers .ts exécutés par Node.js :

{
  "compilerOptions": {
    "target": "es2022",
    "module": "nodenext",
    "strict": true,
    "noEmit": true,
    "erasableSyntaxOnly": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": ["*.ts"]
}

• "strict": true active toutes les vérifications importantes : gardez-le toujours.
• "noEmit": true: le compilateur vérifie sans produire de fichiers (c'est Node.js ou Vite qui exécutent le code).
• "erasableSyntaxOnly": true interdit les rares syntaxes TypeScript qui ne sont pas de simples annotations (comme enum), pour que le code reste exécutable directement par Node.js.
• Vérification : npx tsc. Résultat sur un fichier avec des erreurs :

erreurs.ts(8,46): error TS2322: Type 'string' is not assignable to type 'number'.
erreurs.ts(9,17): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number[]'.
erreurs.ts(10,17): error TS2339: Property 'prenom' does not exist on type 'Stagiaire'.

const champ = document.querySelector<HTMLInputElement>("#recherche");
if (champ) {                     // querySelector peut renvoyer null
  console.log(champ.value.trim());
}

Activité 1 : repérer les erreurs

• Sans exécuter, indiquez les lignes qui provoquent une erreur TypeScript et pourquoi, puis vérifiez avec npx tsc:

let total: number = 0;
total = "10";
const groupes: string[] = ["DEV101", 102];
function aire(largeur: number, hauteur: number): number {
  return largeur * hauteur;
}
aire(4);
const resultat: string = aire(2, 3);

Activité 2 : typer le bulletin

• Dans un dépôt GitHub js-typescript, installez TypeScript avec la configuration de la leçon. Recopiez notes.ts, exécutez-le avec node notes.ts puis vérifiez avec npx tsc.
• Ajoutez une interface Groupe (code, formateur, stagiaires: Stagiaire[]) et une fonction moyenneDuGroupe(groupe: Groupe): number.

Activité 3 : exécuté mais faux

• Introduisez volontairement une erreur de type dans notes.ts. Que se passe-t-il avec node notes.ts? Et avec npx tsc? Concluez sur le rôle de chacun.

Activité 4 : un projet Vite en TypeScript

• Créez un projet avec le modèle vanilla-ts. Ajoutez une fonction typée qui affiche une liste de cours (interface Cours) dans la page.