Visionner la vidéo

Apprendre TypeScript en 5 Minutes : Le Guide Essentiel

  Typescript

Introduction

Dans cette vidéo, je vous propose d’apprendre TypeScript en seulement cinq minutes. Si vous faites du JavaScript et que vous cherchez un moyen d’écrire un code plus propre, plus sûr et plus performant, alors TypeScript est fait pour vous.

Qu’est-ce que TypeScript ?

Qu'est-ce que Typescript ?

TypeScript, c’est comme du JavaScript… mais en mieux ! Développé par Microsoft, ce langage open-source ajoute un système de types statiques qui vous permet de déclarer vos variables, fonctions et objets avec plus de précision. Résultat : votre code est plus fiable et moins sujet aux erreurs.

Installation et Configuration

Installation

Vous pouvez installer TypeScript avec la commande suivante :

npm install -g typescript

Cette commande met à votre disposition l’outil de compilation tsc (TypeScript Compiler).

Configuration

Créez ensuite un fichier tsconfig.json à la racine de votre projet :

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "dist",
    "strict": true
  },
  "include": ["src"]
}

Cela permettra de compiler automatiquement tous vos fichiers .ts dans le dossier dist sous forme de .js.

Exemples de Base

Déclaration de types simples

Voici comment utiliser les types primitis en TypeScript :

const message: string = "Hello TypeScript";
const compteur: number = 42;
const isActive: boolean = true;

Si vous essayez de faire :

const message: string = 42; // Erreur détectée à la compilation

TypeScript vous préviendra avant même de lancer le code en production.

Fonctions typées

Voici comment typer une fonction en TypeScript :

function addition(a: number, b: number): number {
  return a + b;
}
// TypeScript peut aussi inférer le type de retour automatiquement

Si vous appelez addition(2, "3"), TypeScript signalera immédiatement l’erreur.

Les interfaces

Les interfaces servent à décrire la structure d’un objet :

interface Person {
  name: string;
  age: number;
}

function greet(person: Person): void {
  console.log(`Salut ${person.name}, tu as ${person.age} ans !`);
}

greet({ name: "Alice", age: 25 }); // OK

Omettre l’attribut age ou lui attribuer un type incorrect déclencherait une erreur.

Propriété optionelles

Il est possible de spécifier des propriétés optionnelles dans une interface en utilisant le symbole ? :

interface Person {
  name: string;
  age: number;
  gender?: string;
}

const person = { name: "Joe", age: 13 }; // OK

const person2 = { name: "Joe", age: 13, gender: "male" }; // OK

Le champ gender est facultatif, ce qui permet plus de souplesse lors de la création d’objets.

Héritage d’Interface

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  job: string;
}

Employee reprend les propriétés de Person et ajoute job.

Le Mot-Clé type vs interface

Vous pouvez utiliser le mot clé type pour créer des alias de types ou des unions et intersections :

type UserId = number | string; // Union

type User = {
  id: number;
  name: string;
};

type Employee = User & { job: string }; // Intersection

Les interfaces sont surtout pratiques pour représenter la structure d’un objet et les étendre à volonté.

type est plus flexible pour les unions et combinaisons avancées.

Pourquoi TypeScript est-il si Populaire ?

Les avantages de TypeScript

Pour Aller Plus Loin

Vous souhaitez approfondir TypeScript ?

Conclusion

TypeScript apporte de la robustesse et de la clarté à votre code JavaScript, sans imposer de contraintes complexes. Avec un setup rapide, un système de types statiques et des fonctionnalités avancées (interfaces, type, héritage…), il n’a jamais été aussi simple d’écrire du code de qualité professionnelle.

Merci d’avoir lu !

Commentaires