Articles
Panimula sa TypeScript
Mga Dekorador sa TypeScript

Mga Dekorador sa TypeScript

Ang artikulong ito ay nagpapaliwanag tungkol sa mga dekorador sa TypeScript.

YouTube Video

Mga Dekorador sa TypeScript

Ang mga dekorador sa TypeScript ay isang mekanismo para magdagdag ng karagdagang functionality o pag-uugali sa mga klase, pamamaraan, tagapag-access, katangian, o mga parameter. Ang mga dekorador ay isang makapangyarihang kasangkapan para mapabuti ang nababasa at muling paggamit ng code.

Pangunahing Kaalaman Tungkol sa Mga Dekorador

Ang dekorador ay isang function na naglalagay ng karagdagang functionality sa isang klase o mga miyembro ng klase. Ang mga dekorador ay ipinakilala sa TypeScript 1.5 at iminungkahi din para sa pamantayan ng ECMAScript.

1{
2  "compilerOptions": {
3    "experimentalDecorators": true
4  }
5}
  • Upang magamit ang mga dekorador, kailangan mong paganahin ang opsyong experimentalDecorators sa file na tsconfig.json.

Mga Uri ng Dekorador

Sa TypeScript, maaari mong gamitin ang sumusunod na limang dekorador.

  • Class Decorator Isang decorator na inilalapat sa isang klase.
  • Method Decorator Isang decorator na inilalapat sa isang pamamaraan ng klase.
  • Accessor Decorator Isang decorator na inilalapat sa getter o setter ng isang property ng klase.
  • Property Decorator Isang decorator na inilalapat sa isang property ng klase.
  • Parameter Decorator Isang decorator na inilalapat sa isang parameter ng pamamaraan.

Class Decorator

Ang mga class decorator ay mga dekorador na inilalapat sa mga klase. Ang mga class decorator ay isinusulat sa itaas ng pagtukoy ng klase at maaaring ma-access ang constructor ng klase. Ang mga ito ay pangunahing ginagamit upang baguhin ang pag-uugali ng klase o magdagdag ng 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

Sa halimbawang ito, ang Logger na dekorador ay inilalapat sa klase, at isang mensahe ang ipinapakita sa console kapag na-initialize ang klase.

Method Decorator

Ang mga method decorator ay inilalapat sa mga pamamaraan ng klase at maaaring baguhin ang mga tawag at pag-uugali ng pamamaraan. Ang isang method decorator ay may tatlong argumento.

  1. Ang prototype ng klase
  2. Ang pangalan ng pamamaraan
  3. Ang tagapaglarawan ng ari-arian ng pamamaraan
 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)

Sa halimbawa na ito, ang LogExecutionTime decorator ay inilapat sa pamamaraan, at ang oras ng pag-execute ng pamamaraan ay nai-log.

Accessor na Dekorador

Ang mga accessor na dekorador ay inilalapat sa getter o setter ng mga ari-arian ng klase. Ito ay kapaki-pakinabang para magdagdag ng kilos kapag binabago ang mga halaga ng ari-arian.

 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

Sa halimbawang ito, gumamit ng accessor decorator upang mag-log ng output kapag tinawag ang getter at setter.

Dekorador ng Ari-arian

Ang mga dekorador ng ari-arian ay inilalapat sa mga ari-arian ng klase ngunit hindi direktang mababago ang halaga o kilos ng ari-arian. Ginagamit ito upang makuha ang metadata ng mga ari-arian.

 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'

Sa halimbawa na ito, ang Readonly dekorador ay inilapat sa ari-arian na title, at ang ari-arian ay ginawang read-only.

Dekorador ng Parameter

Ang mga dekorador ng parameter ay inilalapat sa mga parameter ng isang pamamaraan. Karaniwang ginagamit ang mga ito upang mag-imbak ng metadata o mag-validate ng mga parameter. Ang mga dekorador ay tumatanggap ng tatlong argumento.

  1. Ang prototype ng klase
  2. Ang pangalan ng pamamaraan
  3. Indeks ng 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.

Sa halimbawa na ito, ang LogParameter dekorador ay inilapat sa unang parameter ng pamamaraan na greet, at kapag tinawag ang pamamaraan, ito ay nai-log na ang parameter ay na-decorate.

Praktikal na Halimbawa ng mga Dekorador

Ang mga dekorador ay malawakang ginagamit sa mga framework tulad ng Angular, lalo na para sa dependency injection at paglalarawan ng metadata. Halimbawa, gamitin ang @Component dekorador upang tukuyin ang mga Angular na bahagi tulad ng nasa ibaba.

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

Dahil dito, ang mga dekorador ay madalas na ginagamit bilang pangunahing bahagi ng mga framework at library, na tumutulong na mapanatili ang code na maikli at malinaw.

Buod ng mga Dekorador

Ang mga TypeScript na dekorador ay malalakas na kasangkapan na may kakayahang magdagdag ng functionality sa mga klase, pamamaraan, at mga ari-arian. Ang paggamit ng custom na dekorador ay nagpapabuti sa pagpapanatili at muling paggamit ng code, na nagbibigay-daan sa mas mataas na abstraction. Ang mga dekorador ay may mahalagang papel sa mga framework tulad ng Angular at NestJS, at ang pag-unawa sa kanila ay nakakatulong upang mas malalim na maunawaan kung paano gumagana ang mga framework na ito.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Module sa TypeScript