Debuter avec TypeScript

Pourquoi TypeScript ?

TypeScript est une extension robuste et typée de JavaScript, développée et maintenue par Microsoft. Il ajoute des fonctionnalités essentielles qui ne sont pas disponibles dans JavaScript pur, comme la vérification des types statiques et l'intellisense.

Dans le monde du développement moderne où les projets deviennent de plus en plus complexes et évoluent rapidement, TypeScript offre un soutien accru à l'écriture et au maintien du code. Il permet aux développeurs d'éviter les erreurs en temps de compilation plutôt que de laisser qu'elles soient détectées lors des tests ou même en production.

Un cas concret d'utilisation de TypeScript est dans le développement front-end moderne, où des applications JavaScript peuvent rapidement devenir difficiles à maintenir sans structure. Avec TypeScript, vous pouvez définir des interfaces et des types pour vos composants, réduisant ainsi les risques de bugs liés aux changements inattendus.

Prerequis

Avant de commencer avec TypeScript, voici les connaissances nécessaires et les outils à installer :

• Connaissances en JavaScript : TypeScript est une extension de JavaScript. Il est donc utile d'avoir un bon niveau de compréhension des concepts de base de JavaScript.

• Outils à installer :

  • Node.js v14.x ou plus récent
  • npm (Node Package Manager)
  • Un éditeur de code moderne comme Visual Studio Code (VSCode)

Vous pouvez télécharger et installer ces outils en suivant les instructions officielles sur le site web de Node.js.

Concepts fondamentaux

1. Types

Les types définissent la forme que devrait prendre une valeur dans un programme TypeScript. Ils aident à éviter les erreurs et à améliorer la lisibilité du code.

Exemple :

let age: number = 25;
let isStudent: boolean = true;
let name: string = "Alice";

2. Interfaces

Les interfaces définissent des contrats que les objets doivent respecter. Elles sont très utiles pour structurer les données complexes.

Exemple :

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

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
};

3. Fonctions

Les fonctions permettent de regrouper du code réutilisable en blocs nommés.

Exemple :

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const greeting = greet("Alice");
console.log(greeting);

4. Classes

Les classes offrent une structure pour définir des objets avec des propriétés et des méthodes.

Exemple :

class Person {
  id: number;
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }

  greet(): string {
    return `Hello, my name is ${this.name} and I have the ID ${this.id}.`;
  }
}

const person = new Person(1, "Alice");
console.log(person.greet());

5. Types d'Union et de Type Guard

Les types d'union permettent de spécifier que une variable peut avoir plusieurs types.

Exemple :

function logValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String: ${value}`);
  } else {
    console.log(`Number: ${value}`);
  }
}

logValue("Hello");
logValue(42);

6. Types de Tableau

Les types de tableau définissent le type des éléments qu'il peut contenir.

Exemple :

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob"];

7. Types Enum

Les enums permettent de définir un ensemble de noms constants liés à des valeurs numériques.

Exemple :

enum Color {
  Red,
  Green,
  Blue
}

const myColor: Color = Color.Green;
console.log(myColor); // Output: 1

8. Types Nullable

Les types nullable permettent de spécifier que une variable peut être null ou undefined.

Exemple :

let value: number | null = null;

if (value !== null) {
  console.log(value);
} else {
  console.log("Value is null");
}

Mise en pratique : projet fil rouge

Nous allons construire un mini-projet complet : un gestionnaire de tâches. Ce projet comprendra les fonctionnalités suivantes :

• Ajouter une tâche
• Supprimer une tâche
• Marquer une tâche comme terminée
• Afficher la liste des tâches

Étape 1 : Initialisation du projet

Commencez par créer un nouveau dossier pour votre projet et initialisez un nouveau projet Node.js.

mkdir task-manager
cd task-manager
npm init -y

Installez TypeScript et les outils de compilation.

npm install typescript --save-dev
npx tsc --init

Étape 2 : Structure du projet

Créez la structure de base du projet avec les fichiers suivants :

• src/index.ts
• src/task.ts
• tsconfig.json (déjà créé par le script d'initialisation)

Étape 3 : Définition des interfaces

Ouvrez le fichier src/task.ts et définissez une interface pour la tâche.

// src/task.ts
export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

Étape 4 : Gestionnaire de tâches

Ouvrez le fichier src/index.ts et importez l'interface Task. Créez une classe pour gérer les tâches.

// src/index.ts
import { Task } from './task';

class TaskManager {
  private tasks: Task[] = [];
  private nextId: number = 1;

  addTask(title: string): void {
    const task: Task = {
      id: this.nextId++,
      title: title,
      completed: false
    };
    this.tasks.push(task);
  }

  removeTask(id: number): void {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }

  toggleCompletion(id: number): void {
    const task = this.tasks.find(task => task.id === id);
    if (task) {
      task.completed = !task.completed;
    }
  }

  getTasks(): Task[] {
    return this.tasks;
  }
}

const manager = new TaskManager();
manager.addTask("Buy groceries");
manager.toggleCompletion(1);
manager.removeTask(2);

console.log(manager.getTasks());

Étape 5 : Compilation et exécution

Compilez le code TypeScript en JavaScript.

npx tsc

Exécutez le fichier généré.

node dist/index.js

Vous devriez voir la sortie suivante :

[ { id: 1, title: 'Buy groceries', completed: true } ]

Erreurs frequentes et debugging

Voici trois erreurs courantes avec leurs corrections.

Erreur : Type 'number' is not assignable to type 'string'.

Code incorrect :

let message = "Hello";
message = 123; // Erreur

Code correct :

let message: string | number = "Hello";
message = 123; // Correct

Erreur : Property 'push' does not exist on type 'number'.

Code incorrect :

let numbers: number = 42;
numbers.push(5); // Erreur

Code correct :

let numbers: number[] = [1, 2, 3];
numbers.push(4); // Correct

Erreur : Type 'void' is not assignable to type 'string'.

Code incorrect :

function greet(name: string): void {
  return `Hello, ${name}!`; // Erreur
}

const greeting = greet("Alice");
console.log(greeting);

Code correct :

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const greeting = greet("Alice");
console.log(greeting); // Correct

Pour aller plus loin

Voici trois pistes pour approfondir votre apprentissage de TypeScript :

1. Types avancés : Explorez les types génériques, les types d'intersection et l'inferrence de type.
2. TypeScript avec React : Intégrez TypeScript dans un projet React pour une meilleure gestion des props et des états.
3. Projets réels : Commencez à travailler sur des projets plus complexes, comme une application web complète ou une API REST.

Voici un défi pratique à réaliser seul :

• Créez un gestionnaire de contact avec les fonctionnalités suivantes :
  • Ajouter un contact
  • Supprimer un contact
  • Mettre à jour les informations d'un contact
  • Afficher la liste des contacts

Indice : Utilisez une classe pour gérer les contacts et des interfaces pour définir le format des données.