Pengenalan kepada TypeScript-tutorial js-php.cn

Pengenalan kepada TypeScript

王林

Lepaskan： 2024-07-24 14:49:19

asal

451 orang telah melayarinya

Introduction to TypeScript

TypeScript ialah superset bertaip JavaScript yang menyusun kepada JavaScript biasa. Ia menambahkan jenis statik pada kod anda, menjadikannya lebih mudah untuk menangkap ralat semasa pembangunan.

Menyediakan TypeScript
Mula-mula, mari sediakan TypeScript:

Pasang TypeScript secara global menggunakan npm:

npm install -g typescript

Salin selepas log masuk

Memulakan projek TypeScript:

tsc --init

Salin selepas log masuk

Kompilasi TypeScript:

Untuk menyusun fail TypeScript (.ts), jalankan:

tsc filename.ts

Salin selepas log masuk

Jenis Asas

Mari kita mulakan dengan beberapa jenis asas dan contoh lucu.

1. Jenis Primitif

String

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

Salin selepas log masuk

Nombor

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

Salin selepas log masuk

Boolean

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

Salin selepas log masuk

Bayangkan robot yang hanya boleh memahami jenis tertentu:

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

Salin selepas log masuk

2. Susunan

Tatasusunan TypeScript boleh memuatkan hanya satu jenis data:

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

Salin selepas log masuk

Kucing menyusun koleksi mainannya (hanya bola):

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

Salin selepas log masuk

3. Tuple

Tuples membolehkan anda menyatakan tatasusunan dengan bilangan tetap elemen yang jenisnya diketahui:

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

Salin selepas log masuk

Bayangkan ejen sangat rahsia dengan nama kod dan nombor ID:

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

Salin selepas log masuk

Fungsi

TypeScript membolehkan anda menentukan jenis parameter dan mengembalikan nilai fungsi.

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

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

Salin selepas log masuk

Seorang tukang masak dengan sudu ajaib:

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

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

Salin selepas log masuk

Antara muka

Antara muka mentakrifkan struktur objek.

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

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

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

Salin selepas log masuk

Anjing bercakap dengan kad pengenalan khas:

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

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

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

Salin selepas log masuk

Kelas

Kelas TypeScript ialah cetak biru untuk mencipta objek dengan nilai dan kaedah awal.

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.

Salin selepas log masuk

Kelas adiwira:

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!

Salin selepas log masuk

Enums

Enum membolehkan kita mentakrifkan satu set pemalar bernama.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

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

Salin selepas log masuk

Sistem lampu isyarat:

enum TrafficLight {
    Red,
    Yellow,
    Green
}

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

Salin selepas log masuk

Kesimpulan

_Anda baru sahaja mengadakan lawatan angin puyuh TypeScript, daripada jenis asas kepada ciri yang lebih maju seperti generik dan enum. Dengan contoh ini, anda sepatutnya mempunyai titik permulaan yang baik untuk meneroka dan menggunakan TypeScript dalam projek anda.

Jangan ragu untuk bertanya jika anda mempunyai sebarang soalan khusus atau memerlukan lebih banyak contoh lucu untuk mana-mana bahagian TypeScript!_

Atas ialah kandungan terperinci Pengenalan kepada TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!