Typescript

TypeScript reprend toute la puissance de JavaScript, mais y ajoute un système de types (comme string, number, boolean, etc.) qui permet de détecter les erreurs avant l’exécution, directement lors de la compilation. Il est particulièrement apprécié pour les projets de grande envergure, car il améliore la qualité du code et la collaboration entre développeurs.

Le code TypeScript est compilé en JavaScript standard, exécutable dans tous les navigateurs et environnements Node.js.

Installation

Pour utiliser TypeScript, il faut d’abord installer Node.js, puis exécuter :

1npm install -g typescript

Ensuite, pour compiler un fichier TypeScript (.ts) en JavaScript :

1tsc mon-fichier.ts

Exemple de base

1let nom: string = "Larafrique";
2let age: number = 4;
3let actif: boolean = true;
4 
5console.log(`Bonjour ${nom}, votre compte est actif : ${actif}`);

Le compilateur vérifiera automatiquement que chaque variable correspond bien à son type.

Fonctions typées

1function addition(a: number, b: number): number {
2    return a + b;
3}
4 
5console.log(addition(5, 3));

Ici, la fonction accepte uniquement des nombres et renvoie un nombre. Toute tentative d’y passer une chaîne de caractères provoquerait une erreur à la compilation.

Interfaces et objets

Les interfaces permettent de définir la structure des objets pour éviter les erreurs de forme :

 1interface Utilisateur {
 2    id: number;
 3    nom: string;
 4    email: string;
 5    actif: boolean;
 6}
 7 
 8const user: Utilisateur = {
 9    id: 1,
10    nom: "Aud",
11    email: "aud@larafrique.com",
12    actif: true
13};

Classes et héritage

TypeScript prend en charge la programmation orientée objet :

 1class Vehicule {
 2    constructor(public marque: string, public annee: number) {}
 3 
 4    demarrer(): void {
 5        console.log(`${this.marque} démarre.`);
 6    }
 7}
 8 
 9class Voiture extends Vehicule {
10    constructor(marque: string, annee: number, public modele: string) {
11        super(marque, annee);
12    }
13 
14    afficherDetails(): void {
15        console.log(`${this.marque} ${this.modele} (${this.annee})`);
16    }
17}
18 
19const maVoiture = new Voiture("Toyota", 2022, "Corolla");
20maVoiture.demarrer();
21maVoiture.afficherDetails();

Types avancés

TypeScript offre des fonctionnalités puissantes de typage :

1type ID = string | number;
2 
3function getUser(id: ID) {
4    console.log(`Récupération de l'utilisateur avec ID : ${id}`);
5}
6 
7getUser(42);
8getUser("abc123");

Génériques

Les génériques permettent de créer des fonctions réutilisables et flexibles :

1function identity<T>(valeur: T): T {
2    return valeur;
3}
4 
5console.log(identity<string>("Larafrique"));
6console.log(identity<number>(123));

Bonnes pratiques et outils

• Toujours activer les options strictes dans le fichier tsconfig.json ("strict": true).
• Organiser le code en modules avec import et export.
• Utiliser un linter (comme ESLint) pour assurer la qualité du code.
• Compiler automatiquement avec tsc --watch pendant le développement.
• Utiliser TypeScript avec des frameworks modernes comme Angular, React ou Vue 3.

Exemple de configuration minimale (tsconfig.json) :

1{
2  "compilerOptions": {
3    "target": "es6",
4    "module": "commonjs",
5    "strict": true,
6    "outDir": "dist"
7  },
8  "include": ["src"]
9}

TypeScript est aujourd’hui une référence pour le développement web moderne. En combinant la flexibilité de JavaScript et la sécurité du typage, il permet d’écrire du code plus stable, plus prévisible et mieux organisé, idéal pour les applications web à grande échelle.