Node.js avec TypeScript : guide complet

Voici le tutoriel sur Node.js avec TypeScript en respectant les spécifications données :

Pourquoi Node.js avec TypeScript : guide complet ?

Contexte réel : pourquoi un dev a besoin de ça au quotidien

Le développement moderne nécessite une grande partie du temps pour la maintenance et l'évolution du code. Avec des projets croissants en taille et parfois complexes, le maintien peut devenir un défi majeur. TypeScript offre une solution efficace pour améliorer la qualité du code tout en facilitant sa maintenance.

Un cas d'usage concret : Imaginez que vous travailliez sur une application web avec plusieurs développeurs. Chaque membre du équipe est responsable de différentes parties du codebase, et il se peut qu'ils utilisent des styles différents ou des pratiques qui ne sont pas cohérentes. L'utilisation de TypeScript permet d'ajouter des types à votre code, ce qui offre une meilleure compréhension de l'intention du développeur lorsqu'il écrit le code. En outre, cela aide à prévenir les erreurs en compilant le code avant l'exécution.

Prerequis

• Connaissances en JavaScript et Node.js
• Compréhension des concepts de base de TypeScript (types de données, interfaces, fonctions)
• NPM (Node Package Manager) pour installer les dépendances
• Visual Studio Code ou un autre éditeur de code supportant TypeScript
• Terminal (pour exécuter des commandes)

Concepts fondamentaux

1. Installation et configuration de TypeScript

TypeScript peut être installé via NPM :

npm install -g typescript

Créez un nouveau projet TypeScript en créant un fichier tsconfig.json à la racine du projet :

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

2. Types de base en TypeScript

Voici quelques exemples de types de données en TypeScript :

let myString: string = "Hello, world!";
let myNumber: number = 42;
let isDone: boolean = false;

// Tableaux
let numbersArray: Array<number> = [1, 2, 3];
let mixedArray: (number | string)[] = ["one", 2, "three"];

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

let person: Person = { name: "John", age: 30 };

3. Fonctions et interfaces

Les fonctions en TypeScript peuvent accepter des paramètres typés et retourner un type spécifique :

interface Calculator {
    add(x: number, y: number): number;
}

let calculator: Calculator = {
    add: function(x: number, y: number): number {
        return x + y;
    }
};

4. Modules en TypeScript

Les modules en TypeScript vous permettent de diviser votre code en plusieurs fichiers et les importer lorsque vous en avez besoin :

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from './math';

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

Mise en pratique : projet fil rouge

1. Création du projet

Créez un nouveau répertoire pour votre projet et initialisez-le avec NPM :

mkdir nodejs-ts-todo-app
cd nodejs-ts-todo-app
npm init -y

Installez les dépendances nécessaires :

npm install express body-parser cors
npm install --save-dev typescript ts-node @types/node @types/express @types/body-parser @types/cors

2. Création du fichier tsconfig.json

Créez un fichier tsconfig.json dans le répertoire racine :

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

3. Création de la structure du projet

Créez une structure de répertoires simple :

mkdir src
touch src/index.ts
touch src/todo.ts

4. Écriture du code principal

Dans src/index.ts :

import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';
import { getTodos, addTodo } from './todo';

const app = express();
app.use(bodyParser.json());
app.use(cors());

// GET /todos
app.get('/todos', (req, res) => {
    const todos = getTodos();
    res.json(todos);
});

// POST /todos
app.post('/todos', (req, res) => {
    const todo = req.body;
    addTodo(todo);
    res.status(201).json(todo);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

5. Écriture des fonctions pour les todos

Dans src/todo.ts :

interface Todo {
    id: number;
    title: string;
    completed: boolean;
}

let todoId = 1;
const todos: Todo[] = [];

export function getTodos(): Todo[] {
    return [...todos];
}

export function addTodo(todo: { title: string; completed?: boolean }): void {
    const newTodo: Todo = {
        id: todoId++,
        title: todo.title,
        completed: todo.completed || false
    };
    todos.push(newTodo);
}

6. Compilation et exécution du projet

Compilez le code TypeScript en JavaScript :

tsc

Exécutez l'application avec Node.js :

node dist/index.js

Vous devriez maintenant avoir une application de gestion des todos simple fonctionnelle en utilisant Node.js et TypeScript.

Erreurs fréquentes et debugging

1. Erreur : Property 'title' does not exist on type 'any'

Supposons que vous ayez le code suivant :

interface Todo {
    id: number;
    title: string;
    completed: boolean;
}

function addTodo(todo: any): void {
    todo.id = 1;
    todo.title = "New Todo";
    todo.completed = false;
}

Le TypeScript vous affichera une erreur indiquant que la propriété title n'existe pas sur le type any. La solution est de spécifier un type pour l'argument :

function addTodo(todo: Todo): void {
    todo.id = 1;
    todo.title = "New Todo";
    todo.completed = false;
}

2. Erreur : Cannot find module 'express'

Si vous obtenez une erreur indiquant que le module express ne peut être trouvé, vérifiez que vous avez installé les dépendances nécessaires :

npm install express
npm install --save-dev @types/express

3. Erreur : Cannot find name 'Todo'

Si vous obtenez une erreur indiquant que le nom Todo ne peut être trouvé, vérifiez que vous avez correctement importé l'interface dans le fichier où vous la utilisez :

import { Todo } from './todo';

Pour aller plus loin

1. Types personnalisés : Apprenez à créer des types personnalisés avec type ou interface.
2. Utilisation de TypeScript avec React : Intégrez TypeScript dans un projet React pour une meilleure gestion du code.
3. Tests unitaires avec Jest : Ajoutez des tests unitaires à votre application pour vous assurer que tout fonctionne correctement.

Défi pratique

Créez une API simple en utilisant Express et TypeScript qui permet d'ajouter, de récupérer et de supprimer des utilisateurs. Utilisez des interfaces pour définir le type des utilisateurs et assurez-vous que l'API est sécurisée avec un middleware authentification.

Ce tutoriel couvre les concepts fondamentaux de Node.js avec TypeScript et montre comment mettre en œuvre un projet simple en utilisant ces technologies. En suivant ce guide, vous devriez être capable de développer des applications robustes et maintenues à l'aide de TypeScript sur Node.js.