Bien débuter avec TypeScript : Les bases expliquées

TypeScript est une extension de JavaScript qui ajoute des types statiques à votre code. Cela permet de détecter les erreurs à l'étape de compilation, rendant votre code plus robuste et maintenable. Dans cet article, nous allons explorer les bases de TypeScript avec des exemples clairs et concis pour vous aider à bien débuter.

Pourquoi utiliser TypeScript ?

Avant de plonger dans le code, voici quelques avantages clés de TypeScript :

1. Types statiques : Ils permettent de détecter les erreurs avant l'exécution.
2. Complétion et documentation : Les outils comme VS Code offrent une complétion et une documentation enrichies grâce à TypeScript.
3. Interopérabilité : TypeScript fonctionne parfaitement avec les projets JavaScript existants.
4. Code maintenable : Les types facilitent la collaboration en équipe et la gestion des projets complexes.

Installation de TypeScript

Pour commencer avec TypeScript, installez-le globalement via npm :

npm install -g typescript

Pour vérifier que TypeScript est bien installé :

tsc --version

Votre premier fichier TypeScript

Créez un fichier app.ts :

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

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

Compilez ce fichier avec la commande :

tsc app.ts

Cela générera un fichier app.js que vous pourrez exécuter avec Node.js.

Les types de base

1. Type string

const firstName: string = "John";

2. Type number

const age: number = 25;

3. Type boolean

const isDeveloper: boolean = true;

4. Tableaux

const skills: string[] = ["TypeScript", "JavaScript", "React"];

5. Objets

const user: { name: string; age: number } = {
    name: "Alice",
    age: 30,
};

6. Type any

Le type any permet de désactiver la vérification de type. Cependant, son utilisation est à éviter autant que possible.

let randomValue: any = "Hello";
randomValue = 42; // Aucun problème ici.

Fonctions en TypeScript

TypeScript permet de définir les types des paramètres et du retour d'une fonction.

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

const sum = add(10, 20);
console.log(sum);

Les paramètres peuvent être optionnels :

function greetUser(name: string, age?: number): string {
    return age ? `Bonjour, ${name}. Vous avez ${age} ans.` : `Bonjour, ${name}.`;
}

console.log(greetUser("Alice"));
console.log(greetUser("Bob", 25));

Interfaces et Types

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

interface User {
    name: string;
    age: number;
    isAdmin: boolean;
}

const newUser: User = {
    name: "Charlie",
    age: 28,
    isAdmin: false,
};

Les types peuvent aussi être utilisés pour créer des alias :

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

const origin: Point = { x: 0, y: 0 };

Enums

Les enums sont utilisés pour définir un ensemble de valeurs constantes.

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

const move = Direction.Up;
console.log(move); // Affiche 0 (index de la valeur)

Classes

TypeScript permet d’utiliser la POO avec des classes et des interfaces.

class Person {
    name: string;
    age: number;

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

    greet(): string {
        return `Bonjour, je m'appelle ${this.name} et j'ai ${this.age} ans.`;
    }
}

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

Configuration du fichier tsconfig.json

Pour configurer votre projet TypeScript, initialisez un fichier tsconfig.json :

tsc --init

Un fichier de configuration typique peut ressembler à ceci :

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

Conclusion

TypeScript est un outil puissant pour écrire du code JavaScript plus sûr et maintenable. En comprenant les bases comme les types, les interfaces et les classes, vous serez bien équipé pour créer des applications robustes.

N’hésitez pas à explorer plus loin et à appliquer TypeScript à vos projets existants pour en ressentir tous les avantages.