Introduction à TypeScript

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut. Il ajoute des types statiques à votre code, ce qui facilite la détection des erreurs pendant le développement.

Configuration de TypeScript
Tout d'abord, configurons TypeScript :

1. Installez TypeScript globalement à l'aide de npm :

npm install -g typescript

1. Initialiser un projet TypeScript :

tsc --init

1. Compiler TypeScript :

Pour compiler un fichier TypeScript (.ts), exécutez :

tsc filename.ts

Types de base

Commençons par quelques types de base et des exemples amusants.

1. Types primitifs

• Chaîne

let greeting: string = "Hello, TypeScript!";
console.log(greeting); // Hello, TypeScript!

• Numéro

let age: number = 42;
console.log(`I'm ${age} years old!`); // I'm 42 years old!

• Booléen

let isHappy: boolean = true;
console.log(`Am I happy? ${isHappy}`); // Am I happy? true

Imaginez un robot qui ne peut comprendre que des types spécifiques :

let robotName: string = "RoboCop";
let robotAge: number = 100;
let isRobotFriendly: boolean = true;

console.log(`Meet ${robotName}, who is ${robotAge} years old. Friendly? ${isRobotFriendly}`); 
// Meet RoboCop, who is 100 years old. Friendly? true

2. Tableau

Les tableaux TypeScript ne peuvent contenir qu'un seul type de données :

let fruits: string[] = ["Apple", "Banana", "Cherry"];
console.log(fruits); // ["Apple", "Banana", "Cherry"]

Un chat organisant sa collection de jouets (balles uniquement) :

let catToys: string[] = ["Ball1", "Ball2", "Ball3"];
console.log(catToys); // ["Ball1", "Ball2", "Ball3"]

3. Tuple

Les tuples permettent d'exprimer un tableau avec un nombre fixe d'éléments dont les types sont connus :

let myTuple: [string, number];
myTuple = ["Hello", 42]; // OK
console.log(myTuple); // ["Hello", 42]

Imaginez un agent super secret avec un nom de code et un numéro d'identification :

let agent: [string, number] = ["Bond", 007];
console.log(agent); // ["Bond", 007]

Fonctions

TypeScript vous permet de spécifier les types de paramètres et les valeurs de retour des fonctions.

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

console.log(add(5, 3)); // 8

Un chef avec une cuillère magique :

function mixIngredients(ingredient1: string, ingredient2: string): string {
    return `${ingredient1} mixed with ${ingredient2}`;
}

console.log(mixIngredients("Flour", "Sugar")); // Flour mixed with Sugar

Interfaces

Les interfaces définissent la structure d'un objet.

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

let user: Person = {
    name: "Alice",
    age: 30
};

console.log(user); // { name: "Alice", age: 30 }

Un chien qui parle avec une carte d'identité spéciale :

interface Dog {
    name: string;
    breed: string;
}

let talkingDog: Dog = {
    name: "Scooby-Doo",
    breed: "Great Dane"
};

console.log(talkingDog); // { name: "Scooby-Doo", breed: "Great Dane" }

Cours

Les classes TypeScript sont un modèle pour créer des objets avec des valeurs et des méthodes initiales.

class Animal {
    name: string;

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

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

let dog = new Animal("Dog");
dog.move(10); // Dog moved 10 meters.

Un cours de super-héros :

class Superhero {
    name: string;

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

    saveTheCat() {
        console.log(`${this.name} saved the cat!`);
    }
}

let hero = new Superhero("Batman");
hero.saveTheCat(); // Batman saved the cat!

Énumérations

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

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let move: Direction = Direction.Up;
console.log(move); // 0

Un système de feux tricolores :

enum TrafficLight {
    Red,
    Yellow,
    Green
}

let light: TrafficLight = TrafficLight.Green;
console.log(light); // 2

Conclusion

_Vous venez de faire un tour éclair de TypeScript, des types de base aux fonctionnalités plus avancées comme les génériques et les énumérations. Avec ces exemples, vous devriez avoir un bon point de départ pour explorer et utiliser davantage TypeScript dans vos projets.

N'hésitez pas à demander si vous avez des questions spécifiques ou si vous avez besoin d'exemples plus amusants pour n'importe quelle partie de TypeScript !_

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!