Introduction à TypeScript

TypeScript est un superset de JavaScript développé par Microsoft qui ajoute le typage statique au langage. Il compile vers du JavaScript standard, ce qui signifie qu’il peut s’exécuter partout où JavaScript fonctionne.

Qu’est-ce que TypeScript ?

TypeScript étend JavaScript en ajoutant des définitions de types. Cela permet de :

• Détecter les erreurs au moment de la compilation plutôt qu’à l’exécution
• Améliorer l’expérience de développement avec l’autocomplétion et la refactorisation
• Faciliter la maintenance des grandes applications
• Documenter le code de manière naturelle avec les types

Pourquoi utiliser TypeScript ?

1. Détection d’erreurs précoce

// JavaScript - Erreur détectée à l'exécution
function greet(name) {
    return "Hello, " + name.toUppercase(); // Erreur : toUppercase n'existe pas
}

// TypeScript - Erreur détectée à la compilation
function greet(name: string): string {
    return "Hello, " + name.toUppercase(); // ❌ Erreur détectée immédiatement
    //                    ^^^^^^^^^^^
    // Property 'toUppercase' does not exist on type 'string'
}

2. Meilleure expérience de développement

TypeScript offre :

• Autocomplétion intelligente dans votre éditeur
• Refactorisation sûre du code
• Navigation dans le code améliorée
• Documentation intégrée via les types

3. Évolutivité

Pour les grandes applications, TypeScript permet :

• Maintenance plus facile du code
• Collaboration d’équipe améliorée
• Refactorisation en confiance
• Documentation vivante du code

Relation avec JavaScript

TypeScript est un superset de JavaScript, ce qui signifie que :

// ✅ Tout code JavaScript valide est du TypeScript valide
const message = "Hello World";
console.log(message);

// ✅ TypeScript ajoute des fonctionnalités optionnelles
const message: string = "Hello World";
console.log(message);

Comment ça fonctionne ?

1. Écriture : Vous écrivez du code TypeScript (.ts ou .tsx)
2. Compilation : Le compilateur TypeScript (tsc) transforme le code en JavaScript
3. Exécution : Le JavaScript généré s’exécute dans n’importe quel environnement

graph LR
    A[Code TypeScript] --> B[Compilateur tsc]
    B --> C[Code JavaScript]
    C --> D[Exécution]

Exemple concret

Voici un exemple qui montre la puissance de TypeScript :

// Définition d'une interface
interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

// Fonction avec types
function createUser(userData: Partial<User>): User {
    return {
        id: Math.random(),
        isActive: true,
        ...userData
    } as User;
}

// Utilisation avec vérification de types
const newUser = createUser({
    name: "Alice",
    email: "alice@example.com"
});

// ✅ TypeScript vérifie que les propriétés existent
console.log(newUser.name); // OK
console.log(newUser.age);  // ❌ Erreur : 'age' n'existe pas sur User

Avantages clés

Cas d’usage idéaux

TypeScript est particulièrement utile pour :

• Applications web complexes (React, Angular, Vue)
• APIs et backends (Node.js, Express)
• Bibliothèques et frameworks
• Applications d’entreprise
• Projets collaboratifs

Ce que vous allez apprendre

Dans ce cours, nous couvrirons :

1. Installation et configuration de TypeScript
2. Types de base et syntaxe fondamentale
3. Interfaces et types avancés
4. Classes et programmation orientée objet
5. Génériques et types utilitaires
6. Intégration avec les frameworks populaires

Prêt à commencer ?

TypeScript transformera votre façon de développer en JavaScript. Passons à l’installation et à la configuration de votre environnement de développement !

Conseil : TypeScript a une courbe d’apprentissage douce. Vous pouvez commencer par ajouter des types simples à votre code JavaScript existant et progresser graduellement vers des fonctionnalités plus avancées.