Kelas dalam TypeScript

Artikel ini menerangkan tentang kelas dalam TypeScript.

YouTube Video

Kelas dalam TypeScript

Kelas dalam TypeScript berdasarkan kelas ES6 JavaScript dan menawarkan ciri tambahan seperti anotasi jenis dan pengubah akses. Ini membolehkan anda memanfaatkan konsep pengaturcaraan berorientasikan objek sambil memastikan keselamatan jenis yang lebih kukuh dan jelas.

Di bawah adalah penerangan tentang penggunaan asas dan ciri-ciri kelas dalam TypeScript.

Definisi Kelas Asas

 1class Person {
 2    name: string;  // Member variable
 3    age: number;   // Member variable
 4
 5    // Constructor
 6    constructor(name: string, age: number) {
 7        this.name = name;
 8        this.age = age;
 9    }
10
11    // Method
12    greet(): void {
13        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
14    }
15}
16
17const person = new Person("Alice", 25);
18person.greet();  // Hello, my name is Alice and I am 25 years old.

• name dan age adalah sifat (pembolehubah ahli) bagi kelas tersebut.
• constructor adalah kaedah yang dipanggil apabila mencipta instans kelas, yang mengambil hujah dan memberikan nilai kepada sifat-sifatnya.
• greet adalah kaedah bagi kelas tersebut, menunjukkan ia tidak mempunyai nilai balik dengan jenis void.

Pengubah Akses

Dalam TypeScript, anda boleh menggunakan pengubah akses (public, private, protected) untuk mengawal akses kepada sifat dan kaedah kelas.

public

Secara lalai, semua sifat dan kaedah adalah public. Ini bermakna ia boleh diakses dari luar kelas.

 1class Animal {
 2    public species: string;
 3
 4    constructor(species: string) {
 5        this.species = species;
 6    }
 7
 8    public makeSound(): void {
 9        console.log(`${this.species} makes a sound.`);
10    }
11}
12
13const animal = new Animal("Dog");
14console.log(animal.species);  // Dog
15animal.makeSound();           // Dog makes a sound.

• Sifat species dan kaedah makeSound diisytiharkan sebagai public dan boleh diakses dari luar kelas.

private

Menggunakan pengubah private menghalang akses kepada sifat atau kaedah dari luar kelas.

 1class Car {
 2    private brand: string;
 3
 4    constructor(brand: string) {
 5        this.brand = brand;
 6    }
 7
 8    public getBrand(): string {
 9        return this.brand;
10    }
11}
12
13const car = new Car("Toyota");
14// console.log(car.brand);  // Error: 'brand' is private and cannot be accessed.
15console.log(car.getBrand());  // Toyota

• Sifat brand diisytiharkan sebagai private, jadi ia tidak boleh diakses dari luar kelas.
• Penkapsulan data boleh dicapai dengan menyembunyikan sifat menggunakan pengubah private.

protected

Pengubah protected mengehadkan akses dari luar kelas tetapi membenarkannya dalam subkelas (kelas terbitan).

 1class Vehicle {
 2    protected model: string;
 3
 4    constructor(model: string) {
 5        this.model = model;
 6    }
 7}
 8
 9class Truck extends Vehicle {
10    public getModel(): string {
11        return this.model;
12    }
13}
14
15const truck = new Truck("Ford F-150");
16console.log(truck.getModel());  // Ford F-150
17
18// console.log(truck.model);
19// Error: Property 'model' is protected and only accessible within class 'Vehicle' and its subclasses.

• Sifat model diisytiharkan sebagai protected, jadi ia tidak boleh diakses dari luar kelas tetapi boleh diakses dari subkelas.

Getter dan Setter

Dalam TypeScript, anda boleh mentakrifkan getter dan setter menggunakan kata kunci get dan set untuk mendapatkan dan menetapkan nilai sifat.

 1class Employee {
 2    private _salary: number;
 3
 4    constructor(salary: number) {
 5        this._salary = salary;
 6    }
 7
 8    // Getter
 9    get salary(): number {
10        return this._salary;
11    }
12
13    // Setter
14    set salary(newSalary: number) {
15        if (newSalary > 0) {
16            this._salary = newSalary;
17        } else {
18            console.log("Salary must be positive.");
19        }
20    }
21}
22
23const employee = new Employee(50000);
24console.log(employee.salary);  // 50000
25employee.salary = 60000;
26console.log(employee.salary);  // 60000
27employee.salary = -100;        // Salary must be positive.

• Dalam contoh ini, getter dan setter digunakan untuk sifat salary untuk mengawal akses dan kemas kini luaran. Setter menjalankan pengesahan untuk mengelakkan nilai negatif, dan memaparkan mesej amaran jika nilai tidak sah diberikan.

Pewarisan

Dalam TypeScript, kelas boleh diwarisi. Dengan menggunakan kata kunci extends, anda boleh mewarisi fungsi daripada kelas induk.

 1class Animal {
 2    constructor(public name: string) {}
 3
 4    public move(): void {
 5        console.log(`${this.name} is moving.`);
 6    }
 7}
 8
 9class Bird extends Animal {
10    public fly(): void {
11        console.log(`${this.name} is flying.`);
12    }
13}
14
15const bird = new Bird("Sparrow");
16bird.move();  // Sparrow is moving.
17bird.fly();   // Sparrow is flying.

• Dalam contoh ini, kelas Bird mewarisi dari kelas Animal, yang membolehkannya menggunakan kaedah move daripada Animal. Selain itu, ia menentukan kaedah fly sendiri, menambah fungsi baharu sambil mewarisi ciri-ciri dari kelas induk.

Kelas Abstrak

Kelas abstrak (abstract) tidak boleh dijadikan instans secara langsung dan digunakan sebagai templat untuk menyediakan pelaksanaan konkrit dalam subkelas.

 1abstract class Shape {
 2    abstract getArea(): number;
 3
 4    public describe(): void {
 5        console.log("This is a shape.");
 6    }
 7}
 8
 9class Circle extends Shape {
10    constructor(private radius: number) {
11        super();
12    }
13
14    public getArea(): number {
15        return Math.PI * this.radius * this.radius;
16    }
17}
18
19const circle = new Circle(5);
20console.log(circle.getArea());  // 78.53981633974483
21circle.describe();  // This is a shape.

• Dalam contoh ini, Shape ditakrifkan sebagai kelas abstrak, dan getArea ialah kaedah abstrak yang mesti dilaksanakan oleh subkelas. Kelas Circle mewarisi kelas abstrak ini dan melaksanakan kaedah getArea sendiri untuk mengira luas bulatan. Selain itu, kaedah konkrit seperti describe diwarisi sebagai fungsi umum dan boleh digunakan sebagaimana adanya.

Hubungan dengan Antara Muka

Kelas boleh melaksanakan antara muka, memastikan mereka mempunyai sifat dan kaedah tertentu.

 1interface Flyable {
 2    fly(): void;
 3}
 4
 5class Airplane implements Flyable {
 6    public fly(): void {
 7        console.log("The airplane is flying.");
 8    }
 9}
10
11const airplane: Flyable = new Airplane();
12airplane.fly();  // The airplane is flying.

• Dalam contoh ini, antara muka Flyable menentukan spesifikasi untuk kaedah fly, dan kelas Airplane melaksanakan antara muka ini dengan menyediakan definisi konkrit untuk kaedah fly. Dengan ini, mana-mana objek yang boleh dianggap sebagai jenis Flyable dijamin mempunyai kaedah fly.

Ahli Statik

Apabila anda menentukan ahli statik dalam sesuatu kelas, kaedah dan sifat tersebut dikaitkan dengan kelas itu sendiri. Ahli statik boleh dipanggil tanpa mewujudkan objek kelas.

 1class MathUtils {
 2    static PI: number = 3.14;
 3
 4    static add(a: number, b: number): number {
 5        return a + b;
 6    }
 7}
 8
 9console.log(MathUtils.add(10, 20)); // 30
10console.log(MathUtils.PI); // 3.14

• Anda menentukan kaedah statik menggunakan kata kunci static.
• Dalam contoh ini, kelas MathUtils mentakrifkan kaedah statik add dan sifat statik PI.
• Ahli statik tidak dimiliki oleh instans kelas, tetapi boleh dipanggil secara terus dari kelas itu sendiri.

Ringkasan

Kelas TypeScript menambah ciri seperti keselamatan jenis, pengubah akses, dan kelas abstrak kepada fungsi kelas JavaScript. Ini membolehkan pengaturcaraan berorientasikan objek yang lebih kuat dan selamat.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video