Pengenalan kepada 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:

1. Pasang TypeScript secara global menggunakan npm:

npm install -g typescript

1. Memulakan projek TypeScript:

tsc --init

1. Kompilasi TypeScript:

Untuk menyusun fail TypeScript (.ts), jalankan:

tsc filename.ts

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!

• Nombor

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

• Boolean

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

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

2. Susunan

Tatasusunan TypeScript boleh memuatkan hanya satu jenis data:

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

Kucing menyusun koleksi mainannya (hanya bola):

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

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]

Bayangkan ejen sangat rahsia dengan nama kod dan nombor ID:

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

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

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

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 }

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

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.

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!

Enums

Enum membolehkan kita mentakrifkan satu set pemalar bernama.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

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

Sistem lampu isyarat:

enum TrafficLight {
    Red,
    Yellow,
    Green
}

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

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!