Typescript

Pourquoi utiliser TypeScript ?

TypeScript est une extension de JavaScript qui ajoute des types statiques. Créé par Microsoft, il est conçu pour rendre le code JavaScript plus fiable, lisible et maintenable, notamment dans les projets d'envergure.

L'un des plus grands avantages de TypeScript est la détection des erreurs lors de la compilation, contrairement à JavaScript où les erreurs ne sont souvent détectées qu'à l'exécution. Voici un exemple simple :

Exemple JavaScript

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5
console.log(add(2, 'three')); // "2three" (Erreur non détectée)

Exemple TypeScript

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(2, 'three')); // Erreur détectée à la compilation
console.log(add(2, 3)); // 5

Avec TypeScript, les erreurs comme le passage d'une chaîne à la place d'un nombre sont évitées à l'avance.

Installation et configuration

Pour installer Typescript, comme tous packages, deux solutions s'offrent à vous. Soit vous l'installez globalement sur votre machine, soit vous l'ajoutez en tant que dépendance de votre projet.

# Installation globale
npm install -g typescript

# Installation locale
npm install -d typescript

Configuration

Pour configurer TypeScript, vous pouvez créer une configuration par défaut en utilisant la commande suivante :

# Installatin globale
tsc --init

# Installation locale
npx tsc --init

Cette commande va générer un fichier tsconfig.json qui contient la configuration de TypeScript pour votre projet. Vous pouvez personnaliser ce fichier en fonction de vos besoins. Nous n'allons pas rentrer dans le détail de la configuration de Typescript ici, mais vous pouvez consulter la documentation officielle.

Compilation d'un fichier TypeScript

Nous allons modifier notre fichier index.js en index.ts pour le transformer en fichier TypeScript. TypeScript utilise l'extension .ts pour les fichiers.

Pour pouvoir lancer notre application NodeJS, nous devons compiler notre fichier TypeScript en JavaScript. Pour cela, nous utilisons la commande tsc (TypeScript Compiler).

# Compilation du fichier TypeScript
tsc index.ts

Elle peut aussi être écrit dans un script dans le fichier package.json pour simplifier la commande.

{
  "scripts": {
    "build": "tsc index.ts"
  }
}

Cette commande va générer un fichier index.js à partir de index.ts que vous pourrez ensuite exécuter avec NodeJS comme nous l'avons fait précédemment.

Gestion du hot-reload

Pour éviter de devoir compiler à chaque modification de fichier, vous pouvez utiliser un outil comme ts-node qui permet d'exécuter directement des fichiers TypeScript sans les compiler.

# Installation de ts-node
npm install -d ts-node

Vous pouvez ensuite exécuter votre fichier TypeScript directement avec ts-node.

ts-node index.ts

Cependant ts-node ne fait qu'executer le code sans le compiler. Si le fichier est modifié, il faudra relancer la commande. Nous allons donc le coupler avec nodemon que nous avons vu précédemment.

{
  "scripts": {
    "dev": "nodemon --exec ts-node ./src/index.ts"
  }
}

Notions de base de TypeScript

Typescript ne permet pas simplement de déclarer des types ou compiler du code. Il ajoute également des fonctionnalités qui rendent le code plus lisible et maintenable.

Certaines de ces notions doivent vous être familières si vous avez déjà travaillé avec des langages de programmation comme Java ou C#.

Typage des variables

TypeScript permet de définir explicitement les types de variables.

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

Typage des fonctions

Ajoutez des types pour les arguments et la valeur de retour.

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

Interfaces

Les interfaces permettent de définir des structures pour vos objets.

interface User {
  name: string;
  age: number;
  isAdmin?: boolean; // Propriété optionnelle
}

const user: User = { name: 'Bob', age: 30 };

Classes

TypeScript ajoute des notions de programmation orientée objet comme les classes.

class Person {
  name: string;
  age: number;

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

  greet(): string {
    return `Hi, I'm ${this.name}`;
  }
}

const person = new Person('Alice', 25);
console.log(person.greet());

Types avancés

Union Types

Un argument peut accepter plusieurs types.

function printId(id: number | string): void {
  console.log(`ID: ${id}`);
}

Type Aliases

Créez des alias pour des types complexes.

type Point = { x: number; y: number };

const point: Point = { x: 10, y: 20 };

Enums

Les énumérations permettent de définir un ensemble de constantes nommées.

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

Les packages @types

Certains packages JavaScript n'ont pas de types TypeScript par défaut. Pour les utiliser dans un projet TypeScript, vous pouvez installer des packages @types. Ce sont des packages que la communauté TypeScript a créés pour ajouter des types à des packages JavaScript existants.

npm install -d @types/nom_du_paquet

Par exemple pour récupérer les types de node:

npm install -d @types/node

Dans les prochain chapitres nous prendrons l'habitude d'installer aussi les types des packages que nous utilisons.

Aller plus loin

TypeScript est un langage puissant qui offre de nombreuses fonctionnalités pour améliorer la qualité et la maintenabilité de votre code. Le comportement de compilation de TypeScript peut par exemple être personnalisé. Nous verrons plus en profondeurs ces notions dans le module dédié à VueJS.