Introduction à TypeScript-js tutoriel-php.cn

Introduction à TypeScript

王林

Libérer： 2024-07-24 14:49:19

original

451 Les gens l'ont consulté

Introduction to 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 :

Installez TypeScript globalement à l'aide de npm :

npm install -g typescript

Copier après la connexion

Initialiser un projet TypeScript :

tsc --init

Copier après la connexion

Compiler TypeScript :

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

tsc filename.ts

Copier après la connexion

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!

Copier après la connexion

Numéro

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

Copier après la connexion

Booléen

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

Copier après la connexion

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

Copier après la connexion

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"]

Copier après la connexion

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

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

Copier après la connexion

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]

Copier après la connexion

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]

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 }

Copier après la connexion

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" }

Copier après la connexion

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.

Copier après la connexion

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!

Copier après la connexion

É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

Copier après la connexion

Un système de feux tricolores :

enum TrafficLight {
    Red,
    Yellow,
    Green
}

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

Copier après la connexion

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!