Migrer de JavaScript vers TypeScript

Pourquoi Migrer de JavaScript vers TypeScript ?

Le passage d'un code JavaScript à TypeScript peut sembler compliqué au premier abord, mais il apporte beaucoup de bénéfices en termes de robustesse et de maintenabilité du code. En effet, TypeScript est un super-set de JavaScript qui ajoute des fonctionnalités comme le typage statique, l'interface, les generics, etc. Cela permet une meilleure gestion des erreurs au moment de la compilation plutôt qu'à l'exécution, et facilite la maintenance et la collaboration d'équipes.

Un cas concret serait par exemple un projet qui nécessite un large éventail de développeurs travaillant en temps partagé sur un même codebase. Avec TypeScript, chaque développeur peut avoir une meilleure compréhension du type des données qu'il manipule, réduisant ainsi le risque d'erreurs et améliorant la productivité.

Prerequis

• Connaissance de base de JavaScript ES6+
• Familiarité avec les outils de gestion de projet comme npm ou yarn
• Compréhension des concepts fondamentaux du développement asynchrone (callbacks, promises, async/await)
• Un environnement de développement confortable (IDE recommandé : VSCode)

Concepts fondamentaux

1. Typage statique

TypeScript ajoute le typage statique au JavaScript, ce qui signifie que vous pouvez déclarer le type des variables et des fonctions. Cela aide à prévenir les erreurs de type en compilant le code.

// ❌ Mauvais : Pas de typage
let age = 25;

// ✅ Correct : Typage statique
let age: number = 25;

2. Interfaces

Les interfaces permettent de définir la structure d'un objet, ce qui aide à garantir que les objets respectent un certain format.

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

// ❌ Mauvais : Sans interface
function greet(person: {name: string, age: number}): void {
  console.log(`Hello ${person.name}, you are ${person.age} years old.`);
}

// ✅ Correct : Avec interface
function greet(person: Person): void {
  console.log(`Hello ${person.name}, you are ${person.age} years old.`);
}

3. Generics

Les generics permettent de créer des composants réutilisables qui peuvent travailler avec différents types de données.

// ✅ Correct : Utilisation de generics
function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("myString");

4. Enumerations

Les enumerations permettent de définir un ensemble de noms constants.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

// ❌ Mauvais : Sans enumeration
function move(direction: number): void {
  if (direction === 0) console.log("Moving up");
  else if (direction === 1) console.log("Moving down");
  // ...
}

// ✅ Correct : Avec enumeration
function move(direction: Direction): void {
  switch(direction) {
    case Direction.Up:
      console.log("Moving up");
      break;
    case Direction.Down:
      console.log("Moving down");
      break;
    // ...
  }
}

5. Modules et Export/Import

TypeScript permet de structurer le code en modules, ce qui facilite la réutilisation du code et la gestion des dépendances.

// ✅ Correct : Module et export/import
// file: utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

// file: main.ts
import {add} from './utils';

console.log(add(1, 2)); // Output: 3

Mise en pratique : projet fil rouge

Nous allons créer un petit gestionnaire de tâches simple. Le projet comprendra les fonctionnalités suivantes :

1. Ajouter une tâche.
2. Supprimer une tâche.
3. Afficher toutes les tâches.

Étape 1 : Initialisation du projet

Commencez par créer un nouveau projet TypeScript avec npm.

mkdir task-manager
cd task-manager
npm init -y
npm install typescript --save-dev
npx tsc --init

Cela crée un fichier tsconfig.json que vous pouvez configurer comme suit :

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Étape 2 : Structure du projet

Créez la structure de base de votre projet :

mkdir src
touch src/index.ts

Étape 3 : Implémentation

index.ts

// file: src/index.ts
import { TaskManager } from './taskManager';

const taskManager = new TaskManager();

taskManager.addTask('Buy groceries');
taskManager.addTask('Finish project');

console.log(taskManager.getTasks()); // Output: [ 'Buy groceries', 'Finish project' ]

taskManager.removeTask(1);

console.log(taskManager.getTasks()); // Output: [ 'Buy groceries' ]

taskManager.ts

// file: src/taskManager.ts
class TaskManager {
  private tasks: string[] = [];

  addTask(task: string): void {
    this.tasks.push(task);
  }

  removeTask(index: number): void {
    if (index >= 0 && index < this.tasks.length) {
      this.tasks.splice(index, 1);
    }
  }

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

export { TaskManager };

Étape 4 : Compilation et exécution

Compilez et exécutez votre code avec le script npm :

npm run build
node dist/index.js

Erreurs frequentes et debugging

1. Erreur de typage

Supposons que vous essayiez d'ajouter une tâche qui n'est pas une chaîne de caractères.

taskManager.addTask(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Correction :

taskManager.addTask('42'); // Correct

2. Erreur d'import/export

Supposons que vous essayiez d'importer une classe qui n'existe pas.

import { TaskManager } from './taskManager'; // Error: Cannot find module './taskManager'

Correction :

1. Assurez-vous que le fichier taskManager.ts existe dans le bon répertoire.
2. Assurez-vous que le chemin d'import est correct.

3. Erreur de compilation

Supposons que vous essayiez d'utiliser un mot-clé réservé en tant que nom de variable.

let class = 'MyClass'; // Error: Identifier 'class' is reserved

Correction :

let myClass = 'MyClass'; // Correct

Pour aller plus loin

1. Types personnalisés

Découvrez comment créer des types personnalisés pour mieux contrôler le comportement de votre code.

• Types personnalisés

2. Type Guards

Apprenez à vérifier les types au runtime, ce qui peut être utile pour des structures complexes.

• Type Guards

3. Decorateurs

Explorez comment ajouter des fonctionnalités aux classes et méthodes sans modifier leur structure.

• Decorators

Défi pratique : Créer un simple API de blog

Créez une petite application Node.js qui utilise Express pour créer un API de blog. L'API devrait permettre les opérations suivantes :

1. Ajouter un article.
2. Supprimer un article.
3. Récupérer tous les articles.

Assurez-vous d'utiliser TypeScript et de structurer votre code en utilisant des modules et des interfaces.