Penghias dalam TypeScript

Artikel ini menjelaskan penghias dalam TypeScript.

YouTube Video

Penghias dalam TypeScript

Penghias TypeScript adalah mekanisme untuk menambah fungsi atau tingkah laku tambahan kepada kelas, kaedah, aksesori, sifat, atau parameter. Penghias adalah alat yang berkuasa untuk meningkatkan kebolehbacaan dan kebolehgunaan semula kod.

Asas Penghias

Penghias adalah fungsi yang menyuntik fungsi tambahan ke dalam kelas atau ahli kelas. Penghias diperkenalkan dalam TypeScript 1.5 dan juga telah dicadangkan untuk standard ECMAScript.

1{
2  "compilerOptions": {
3    "experimentalDecorators": true
4  }
5}

• Untuk menggunakan penghias, anda perlu mengaktifkan pilihan experimentalDecorators dalam fail tsconfig.json.

Jenis-jenis Penghias

Dalam TypeScript, anda boleh menggunakan lima jenis penghias berikut.

• Penghias Kelas Penghias yang digunakan pada sesuatu kelas.
• Penghias Kaedah Penghias yang digunakan pada sesuatu kaedah dalam kelas.
• Penghias Aksesori Penghias yang digunakan pada getter atau setter bagi sifat kelas.
• Penghias Sifat Penghias yang digunakan pada sesuatu sifat dalam kelas.
• Penghias Parameter Penghias yang digunakan pada parameter sesuatu kaedah.

Penghias Kelas

Penghias kelas adalah penghias yang digunakan pada kelas. Penghias kelas ditulis tepat di atas definisi kelas dan boleh mengakses pembina kelas. Ia digunakan terutamanya untuk mengubah tingkah laku kelas atau menambah metadata.

 1function Logger(constructor: Function) {
 2    console.log(`Class ${constructor.name} is being constructed`);
 3}
 4
 5@Logger
 6class Person {
 7    constructor(public name: string) {}
 8}
 9
10const person = new Person('John');
11// Output: Class Person is being constructed

Dalam contoh ini, penghias Logger digunakan pada kelas, dan mesej dipaparkan dalam konsol apabila kelas dimulakan.

Penghias Kaedah

Penghias kaedah digunakan pada kaedah kelas dan boleh mengubah panggilan kaedah serta tingkah laku. Penghias kaedah menerima tiga hujah.

1. Prototip kelas
2. Nama kaedah
3. Penerang sifat kaedah

 1function LogExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 2    const originalMethod = descriptor.value;
 3
 4    descriptor.value = function (...args: any[]) {
 5        console.time(propertyKey);
 6        const result = originalMethod.apply(this, args);
 7        console.timeEnd(propertyKey);
 8        return result;
 9    };
10}
11
12class MathOperations {
13  @LogExecutionTime
14  add(a: number, b: number): number {
15    return a + b;
16  }
17}
18
19const math = new MathOperations();
20math.add(2, 3);
21// Output: add: 0.000ms (execution time is displayed)

Dalam contoh ini, penghias LogExecutionTime diterapkan pada kaedah, dan masa pelaksanaan kaedah dicatat.

Penghias Akses

Penghias akses diterapkan kepada getter atau setter sifat kelas. Ia berguna untuk menambah tingkah laku apabila menukar nilai sifat.

 1function LogAccess(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 2    const originalGet = descriptor.get;
 3    const originalSet = descriptor.set;
 4
 5    if (originalGet) {
 6        descriptor.get = function () {
 7            console.log(`Getter called for ${propertyKey}`);
 8            return originalGet.call(this);
 9        };
10    }
11
12    if (originalSet) {
13        descriptor.set = function (value: any) {
14            console.log(`Setter called for ${propertyKey} with value: ${value}`);
15            originalSet.call(this, value);
16        };
17    }
18}
19
20class Car {
21    private _speed: number = 0;
22
23    @LogAccess
24    get speed() {
25        return this._speed;
26    }
27
28    set speed(value: number) {
29        this._speed = value;
30    }
31}
32
33const car = new Car();
34car.speed = 120;               // Setter called for speed with value: 120
35console.log(car.speed);       // Getter called for speed → 120

Dalam contoh ini, penghias akses digunakan untuk mencatat output apabila getter dan setter dipanggil.

Penghias Sifat

Penghias sifat diterapkan kepada sifat kelas tetapi tidak boleh secara langsung mengubah nilai atau tingkah laku sifat tersebut. Ia digunakan untuk mendapatkan metadata sifat.

 1function Readonly(target: any, propertyKey: string) {
 2    Object.defineProperty(target, propertyKey, {
 3        writable: false
 4    });
 5}
 6
 7class Book {
 8    @Readonly
 9    title: string = "TypeScript Guide";
10}
11
12const book = new Book();
13book.title = "New Title"; // Error: Cannot assign to read only property 'title'

Dalam contoh ini, penghias Readonly diterapkan pada sifat title, dan sifat tersebut dibuat hanya-baca.

Penghias Parameter

Penghias parameter diterapkan kepada parameter kaedah. Ia biasanya digunakan untuk menyimpan metadata atau mengesahkan parameter. Penghias mengambil tiga hujah.

1. Prototip kelas
2. Nama kaedah
3. Indeks Parameter

 1function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
 2    console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} was decorated.`);
 3}
 4
 5class User {
 6    greet(@LogParameter message: string) {
 7        console.log(message);
 8    }
 9}
10
11const user = new User();
12user.greet('Hello!');
13// Output: Parameter at index 0 in method greet was decorated.

Dalam contoh ini, penghias LogParameter diterapkan pada parameter pertama kaedah greet, dan apabila kaedah dipanggil, ia mencatat bahawa parameter tersebut dihiasi.

Contoh Praktikal Penghias

Penghias digunakan secara meluas dalam rangka kerja seperti Angular, terutamanya untuk suntikan pergantungan dan definisi metadata. Sebagai contoh, gunakan penghias @Component untuk mentakrifkan komponen Angular seperti di bawah.

1@Component({
2    selector: 'app-root',
3    template: '<h1>Hello World</h1>',
4})
5export class AppComponent {}

Oleh itu, penghias sering digunakan sebagai bahagian utama rangka kerja dan perpustakaan, membantu mengekalkan kod ringkas dan jelas.

Ringkasan Penghias

Penghias TypeScript adalah alat yang berkuasa yang secara fleksibel menambah fungsi kepada kelas, kaedah, dan sifat. Menggunakan penghias tersuai meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod, membolehkan abstraksi lanjut. Penghias memainkan peranan penting dalam rangka kerja seperti Angular dan NestJS, dan memahaminya membantu memahami secara mendalam bagaimana rangka kerja ini berfungsi.

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

YouTube Video