Typescript fondation

Warning

Je fais cet article Medium pour moi-même. J’ai décidé que Medium sera mon classeur pour les sujets que je veux apprendre ou approfondir. Il y a quelques jours, j’ai voulu reprendre les bases du TypeScript. Qu’est-ce que c’est ? Très simple : c’est tout simplement JavaScript, mais avec un typage strict. Je vous passe l’explication du fichier “.tsc” qui, après la compilation, transforme le code en JavaScript (transpilation). Ce qu’il faut déjà savoir, c’est que JavaScript est un langage dynamique : vous pouvez déclarer une variable avec “let” et le langage adapte le type à ce que vous lui donnez. Avec TypeScript, il faudra indiquer le type explicitement.

Les types primitifs ou types de base

Les types primitifs sont string, number, boolean et les moins fréquents (mais qui existent quand même) bigint et symbol. TypeScript possède aussi deux valeurs primitives particulières :

• Le type undefined signifie que la valeur n’est pas attribuée ou initialisée ; il indique une absence de valeur involontaire.
• Le type null signifie que nous savons que le champ n’a pas de valeur (la valeur est indisponible) ; cela indique une absence intentionnelle de valeur.

/// Voila comment les déclarer
let taille : number;
let nom : string;
let isBlue : boolean;

// 1. UNDEFINED : L'absence involontaire
let idUtilisateur: number;
console.log(idUtilisateur); 
// Résultat : undefined. 
// Pourquoi ? Parce qu'on a créé la boîte (la variable), mais on a oublié d'y mettre quelque chose.

// 2. NULL : L'absence intentionnelle
let idInvite: number | null = null;
// Ici, on dit explicitement : "Je sais que c'est un invité, donc il n'a PAS d'ID".
// C'est une information en soi.

Les autres types complexes

Maintenant, nous allons voir les arrays et le “joker” : le any. Pour les tableaux, rien de plus simple, il suffit d’ajouter [] après le type.

Note concernant le any : c’est un joker, il ne faut pas l’utiliser à tout va car on perd l’intérêt du typage.

exemple:

// Un tableau qui ne contient que des nombres
let notes: number[] = [12, 15, 18];

// Un tableau qui ne contient que des chaînes de caractères
let fruits: string[] = ["Pomme", "Banane", "Orange"];

// Ce tableau peut contenir des nombres OU des valeurs null
let classement: (number | null)[] = [1, 2, null, 4];

let joker: any = 42;
joker = "Maintenant je suis une string"; // Pas d'erreur
joker = [1, 2, 3]; // Toujours pas d'erreur

Le typage des fonctions

Nous allons maintenant voir le typage des fonctions. Oui, les fonctions doivent être typées : cela signifie que les paramètres doivent avoir un type défini, tout comme la valeur qu’elle renvoie.

Get Yoann Rivet’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

exemple:

// 1. Fonction avec paramètres et retour typés
function addition(a: number, b: number): number {
    return a + b;
}

// 2. Fonction qui ne renvoie rien (type void)
function alerteUtilisateur(message: string): void {
    console.error("Attention : " + message);
}

Les interfaces et “types”

Voyons maintenant les interfaces et les types pour déclarer des objets sous forme de contrat.

L’interface agit comme un contrat évolutif : elle est idéale pour définir des objets ou des classes, car elle permet l’héritage (via extends) et la fusion automatique de propriétés (très utile pour les librairies).

Le type, lui, est un alias flexible : il est plus puissant car il peut définir n’importe quoi (pas seulement des objets), comme des unions de valeurs (ex: string | number), ce que l’interface ne peut pas faire.

Conseil : Essayez de maintenir une logique de code en utilisant majoritairement l’un ou l’autre selon vos besoins.

// L'Interface (orientée objet et extension)
interface Vehicule {
    marque: string;
}
interface Voiture extends Vehicule {
    portes: number;
}

// Le Type (alias et flexibilité)
type Energie = "Essence" | "Electrique" | "Hybride"; // Union (impossible en interface)
type MaVoiture = Voiture & { moteur: Energie };      // Intersection

Les opérateurs indispensables

En TypeScript, on peut rendre des champs optionnels avec l’opérateur “?”. À l’inverse, on peut forcer un champ pour qu’il soit considéré comme non-null et non-undefined avec l’opérateur “!”.

On l’utilise quand on est absolument certain que la donnée existe, même si TypeScript a un doute.

exemple:

// 1. Dans une interface
interface Profil {
    nom: string;
    age?: number; // L'âge est optionnel
}

const user1: Profil = { nom: "Alice" }; // correct car age optionnel

// 2. Dans une fonction
function saluer(prenom: string, message?: string): void {
    console.log(`Bonjour ${prenom} ${message || ""}`);
}

saluer("Bob"); // Renvoie "Bonjour Bob " car seul le prenom est obligatoire


// On cherche un bouton qui a l'ID 'btn'
const bouton = document.getElementById('btn');

// TS lève une erreur : "Attention, bouton est peut-être null (s'il n'est pas dans le HTML)"
// bouton.click(); // Erreur

// Si tu es ABSOLUMENT certain que le bouton est là, tu utilises '!'
const boutonForce = document.getElementById('btn')!;
boutonForce.click(); // Plus d'erreur, tu as forcé le passage.

L’Union avec l’opérateur “|” . Il permet à une variable de choisir entre plusieurs types (C’est l’un OU l’autre).

exemple:

// La variable peut être soit un nombre, soit une string
let identifiant: number | string;

identifiant = 101;
identifiant = "AB-20";

L’Intersection avec l’opérateur “&” : Il permet de fusionner plusieurs types pour n’en former qu’un seul (C’est l’un ET l’autre).

exemple:

type Personnel = { nom: string };
type Contact = { email: string };

// L'intersection crée un type qui contient les deux propriétés
type Employe = Personnel & Contact;

const nouvelEmploye: Employe = {
    nom: "Alice",
    email: "alice@dev.com"
};