📘 TypeScript – Le Superset JavaScript Typé

Qu'est-ce que TypeScript ?

TypeScript (TS) est un **superset (sur-ensemble) open-source de JavaScript**, développé par Microsoft.

"Superset" signifie que **tout code JavaScript valide est déjà du code TypeScript valide**. TS ajoute une seule chose : un **système de typage statique optionnel**.

La Transpilation (TS -> JS)

Les navigateurs (Chrome, Firefox) et Node.js ne comprennent *pas* TypeScript. Ils ne comprennent que JavaScript.

Votre code .ts doit être **transpilé** (compilé) par le compilateur TypeScript (tsc) en code JavaScript .js standard (ex: ES6) pour pouvoir être exécuté.

Flux de travail

+---------------------+
| main.ts (Votre code) |
| (Avec Types)        |
+---------------------+
      |
      | (1. Lancer 'tsc')
      ▼
+---------------------+
| tsc (Compilateur)   |
| (Vérifie les erreurs) |
+---------------------+
      |
      | (2. Génère)
      ▼
+-----------------------+
| main.js (Code compilé) |
| (JavaScript pur)      |
+-----------------------+
      |
      | (3. Exécuté par)
      ▼
[Navigateur ou Node.js]

1. Installation (via npm)

TypeScript est un outil Node.js. (Nécessite Node.js/npm).

# 1. (Option A) Globalement
npm install -g typescript

# 2. (Option B) Par projet (Recommandé)
npm install typescript --save-dev

2. tsc (Le Compilateur)

tsc (TypeScript Compiler) est la commande CLI.

# (Si global)
tsc main.ts
# (Crée main.js)

# (Si local)
npx tsc main.ts

3. ts-node (Dev)

ts-node est un outil (de dev) qui compile et exécute le .ts en une seule étape (sans créer de .js).

npm install -g ts-node

# (Exécute main.ts directement)
ts-node main.ts

Annotation (Explicite)

Vous "annotez" la variable avec : type.

// Primitifs
let nom: string = "Alice";
let age: number = 30;
let estAdmin: boolean = true;
let n: null = null;
let u: undefined = undefined;

Inférence (Implicite)

TS est intelligent. Si vous assignez une valeur à l'initialisation, il "devine" (infère) le type.

let nom = "Alice"; // (TS infère 'string')
let age = 30;       // (TS infère 'number')

// Erreur (détectée)
nom = 123;
// Type 'number' is not assignable to type 'string'.

Arrays

Il y a deux syntaxes pour les tableaux.

// Syntaxe 1 (Recommandée)
let noms: string[] = ["Alice", "Bob"];
let ages: number[] = [10, 20, 30];

// Syntaxe 2 (Générique)
let noms_alt: Array = ["Alice", "Bob"];

// Erreur
noms.push(123); // Argument of type 'number'...

Tuples

Un "Tuple" est un tableau avec une **longueur fixe** et des **types fixes** (dans l'ordre).

let user: [string, number];

// OK
user = ["Alice", 30];

// Erreur (ordre)
user = [30, "Alice"];

// Erreur (longueur)
user = ["Alice", 30, true];

Paramètres & Retour

// (param1: type, param2: type): type_retour
function addition(a: number, b: number): number {
    return a + b;
}

// (TS infère 'number' comme retour, mais c'est une 
// bonne pratique de l'expliciter)

// Fonction fléchée (Arrow)
const soustraction = (a: number, b: number): number => {
    return a - b;
};

// Type 'void' (pas de retour)
function logMessage(message: string): void {
    console.log(message);
}

Paramètres Optionnels (?) & Défaut

// 'prenom' est optionnel
function saluer(nom: string, prenom?: string): string {
    if (prenom) {
        return `Bonjour, ${prenom} ${nom}`;
    }
    return `Bonjour, ${nom}`;
}

// Paramètre par défaut
function saluerDefaut(nom: string, prenom: string = "M."): string {
    return `Bonjour, ${prenom} ${nom}`;
}

Types Union (|)

Permet à une variable d'avoir plusieurs types.

let id: string | number;

id = 101; // OK
id = "abc-101"; // OK

// (Utile pour les "narrowing" (rétrécissement))
function printId(id: string | number) {
    if (typeof id === "string") {
        console.log(id.toUpperCase()); // (TS sait que c'est un string)
    } else {
        console.log(id); // (TS sait que c'est un number)
    }
}

Alias (type)

Permet de nommer un type (pour le réutiliser).

Types "Literal"

Le type est la valeur elle-même (ex: "pending").

// 1. Définir un type "Status"
type Status = "pending" | "processing" | "done" | "failed";

// 2. Définir un ID
type UserID = string | number;

// 3. Utiliser les alias
function updateStatus(id: UserID, status: Status): void {
    // ...
}

updateStatus(123, "done"); // OK
updateStatus("abc", "pending"); // OK
updateStatus(123, "error"); // Erreur !

Types de base

let nom: string = "a";
let age: number = 1;
let ok: boolean = true;
let data: any = "...";
let data2: unknown = "...";
let vide: void = undefined;
let n: null = null;

Types (Union & Alias)

type Status = "pending" | "done";
type UserID = string | number;

Types (Array & Objet)

// Array
let liste: string[] = ["a", "b"];
let liste2: Array = [1, 2];

// Tuple
let tuple: [string, number] = ["a", 1];

// Objet (Interface)
interface User {
  id: number;
  nom: string;
  optionnel?: boolean;
}
const user: User = { id: 1, nom: "A" };

// Fonctions
const maFn = (nom: string): number => { return 1; }