Pengenalan kepada TypeScript-tutorial js-php.cn

Pengenalan kepada TypeScript

王林

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

asal

143 人浏览过

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

Seekor 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 elemen tetap yang jenisnya diketahui:

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

Salin selepas log masuk

Bayangkan ejen super 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 chef 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 sesuatu 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 pelan tindakan 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 superhero:

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 pusingan TypeScript, daripada jenis asas kepada ciri yang lebih maju seperti generik dan enum. Dengan contoh ini, anda seharusnya 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!_

以上是Pengenalan kepada TypeScript的详细内容。更多信息请关注PHP中文网其他相关文章！