Introduction à TypeScript

Améliorez votre code JavaScript avec la puissance du typage

Notions théoriques

TypeScript ajoute des types statiques au code JavaScript, ce qui améliore :

• la lisibilité,
• la maintenabilité
• et la robustesse des applications.

Contrairement à JavaScript, TypeScript est compilé avant d'être exécuté, ce qui permet de détecter des erreurs de typage avant même l'exécution du code.

1. Avantages de TypeScript

• Détecte les erreurs de type AVANT l'exécution
• Améliore l'autocomplétion des IDE
• Facilite le travail en équipe sur des gros projets

2. Concepts clés

• Annotations de type :

  let age: number = 25;

• Interfaces :

  interface User {
    name: string;
    id: number;
  }

• Enums (énumérations) :

  enum Direction {
    Up = "UP",
    Down = "DOWN"
  }

• Génériques (pour créer des composants réutilisables) :

  function identity<T>(arg: T): T {
    return arg;
  }

3. Compilation

Le code TypeScript .ts est compilé en JavaScript standard .js via la commande :

tsc monfichier.ts

Exemple simple

En JavaScript, une variable peut changer de type :

let variable = "Hello";
variable = 42; // Pas d'erreur

En TypeScript, on peut restreindre cela :

let message: string = "Hello";
// message = 42; // Erreur : le type attendu est "string"

Exemple d'une fonction

Créons une fonction simple qui prend deux nombres, les additionne, et retourne le résultat.

Avec TypeScript, nous allons ajouter des types pour assurer que les paramètres sont toujours des nombres.

Code TypeScript

// Déclare une fonction qui additionne deux nombres
function addition(a: number, b: number): number {
  return a + b;
}

// Appel de la fonction
const resultat = addition(5, 10);
console.log(`Le résultat est : ${resultat}`);

Explications

1. a: number et b: number signifient que les paramètres doivent être de type number.
2. : number après la parenthèse indique que la fonction retourne un nombre.
3. Si vous essayez d’appeler addition("5", 10), TypeScript vous avertira d’une erreur.

Exemple pratique

Créons une interface utilisateur simple et une fonction pour vérifier si le mot de passe est assez long.

// Définir une interface utilisateur
interface User {
  username: string;
  password: string;
  age?: number; // Propriété optionnelle
}

// Fonction de vérification
function checkUser(user: User): boolean {
  return user.password.length >= 8;
}

// Utilisation
const newUser: User = {
  username: "Marc",
  password: "12345678"
};

console.log(checkUser(newUser)); // true

Étapes :

1. Installer TypeScript : npm install -g typescript
2. Créer un fichier .ts
3. Compiler avec tsc
4. Exécuter le .js généré

Test de mémorisation/compréhension

TypeScript est un...

Langage complètement différent de JavaScript

Sur-ensemble de JavaScript

Langage compilé uniquement en Java

Langage sans typage

Quel est le rôle principal du typage dans TypeScript ?

Améliorer la lisibilité et la robustesse du code

Rendre le code incompatible avec JavaScript

Permettre de ne pas utiliser les variables

Quelle syntaxe permet d'ajouter un type à une variable ?

let variable : string = 'texte';

let variable = string 'texte';

var variable :: string = 'texte';

TypeScript est-il compatible avec tous les navigateurs ?

Oui, sans conversion

Non, il doit être compilé en JavaScript

Oui, mais uniquement avec les navigateurs modernes

Quel fichier de configuration est utilisé par TypeScript ?

tsconfig.json

typescript.config

package.json

Quel est le principal avantage de TypeScript ?

Rendre le code plus rapide à l'exécution

Ajouter des types statiques

Remplacer JavaScript

Comment déclarer une propriété optionnelle dans une interface ?

name!: string

name?: string

name: string | null

Que produit la commande 'tsc index.ts' ?

Exécute le fichier TypeScript

Génère un fichier index.js

Installe les dépendances

Comment typer un tableau de nombres ?

let arr: number[]

let arr: Array<num>

let arr: NumberList

Comment définir un enum pour les jours de la semaine ?

enum Days { Lundi, Mardi }

enum Days = ['Lundi', 'Mardi']

interface Days { Lundi: string }

TP pour réfléchir et résoudre des problèmes

Vous allez créer un programme TypeScript pour gérer une liste de tâches.

Chaque tâche sera un objet ayant les propriétés suivantes :

• titre : un texte décrivant la tâche (type string).
• fait : un booléen indiquant si la tâche est terminée ou non (type boolean).

Étapes à suivre

1. Déclarez une interface Tache avec les propriétés titre et fait.
2. Créez un tableau de tâches initial contenant trois objets conformes à l'interface.
3. Ajoutez une fonction ajouterTache pour ajouter une nouvelle tâche à la liste.
4. Ajoutez une fonction marquerCommeFait pour marquer une tâche comme terminée.
5. Affichez les tâches dans la console.

---

Exemple attendu

interface Tache {
  titre: string;
  fait: boolean;
}

const listeTaches: Tache[] = [
  { titre: "Faire les courses", fait: false },
  { titre: "Apprendre TypeScript", fait: true },
  { titre: "Nettoyer la maison", fait: false },
];

function ajouterTache(titre: string): void {
  listeTaches.push({ titre, fait: false });
}

function marquerCommeFait(index: number): void {
  if (listeTaches[index]) {
    listeTaches[index].fait = true;
  }
}

// Exemple d'utilisation
ajouterTache("Lire un livre");
marquerCommeFait(0);
console.log(listeTaches);

Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Variante du TP

Implémenter une version modifiée de la fonction marquerCommeFait() pour qu’elle reçoive le titre de la tâche au lieu de son index.

La fonction cherchera dans la liste des tâches la tâche correspondante par son titre et la marquera comme terminée.

Une solution de la variante

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

TP avancé

Objectif : Implémenter un système de gestion de jeux avec :

1. Une interface JeuVideo avec :

   • titre (string)
   • genre (enum : Action, RPG, Sport)
   • note (number optionnel)

2. Une fonction ajouterNote() pour donner une note au jeu,

   La fonction doit vérifier que la note est entre 0 et 20.

3. Compiler et tester avec des données exemple

Une solution du TP avancé

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :