Memahami Penghias dalam TypeScript: Pendekatan Prinsip Pertama

Penghias dalam TypeScript menyediakan mekanisme yang berkuasa untuk mengubah suai gelagat kelas, kaedah, sifat dan parameter. Walaupun ia kelihatan seperti kemudahan moden, penghias berakar umbi dalam corak penghias yang mantap yang terdapat dalam pengaturcaraan berorientasikan objek. Dengan mengabstrakkan fungsi biasa seperti pengelogan, pengesahan atau kawalan akses, penghias membenarkan pembangun menulis kod yang lebih bersih dan boleh diselenggara.

Dalam artikel ini, kami akan meneroka penghias dari prinsip pertama, memecahkan fungsi teras mereka dan melaksanakannya dari awal. Sepanjang perjalanan, kita akan melihat beberapa aplikasi dunia sebenar yang mempamerkan utiliti penghias dalam pembangunan TypeScript setiap hari.

Apa itu Penghias?

Dalam TypeScript, penghias hanyalah fungsi yang boleh dilampirkan pada kelas, kaedah, sifat atau parameter. Fungsi ini dilaksanakan pada masa reka bentuk, memberikan anda keupayaan untuk mengubah tingkah laku atau struktur kod sebelum ia dijalankan. Penghias mendayakan pengaturcaraan meta, membolehkan kami menambah fungsi tambahan tanpa mengubah logik asal.

Mari kita mulakan dengan contoh mudah penghias kaedah yang log apabila kaedah dipanggil:

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Example {
  @log
  greet(name: string) {
    return `Hello, ${name}`;
  }
}

const example = new Example();
example.greet('John');

Di sini, penghias log membungkus kaedah salam, mengelog seruan dan parameternya sebelum melaksanakannya. Corak ini berguna untuk memisahkan kebimbangan silang seperti pengelogan daripada logik teras.

Cara Penghias Berfungsi

Penghias dalam TypeScript ialah fungsi yang mengambil metadata yang berkaitan dengan item yang mereka hias. Berdasarkan metadata ini (seperti prototaip kelas, nama kaedah atau deskriptor sifat), penghias boleh mengubah suai gelagat atau malah menggantikan objek yang dihias.

Jenis-jenis Penghias

Penghias boleh digunakan pada pelbagai sasaran, setiap satu dengan tujuan yang berbeza:

• Penghias Kelas : Fungsi yang menerima pembina kelas.

function classDecorator(constructor: Function) {
  // Modify or extend the class constructor or prototype
}

• Penghias Kaedah : Fungsi yang menerima objek sasaran, nama kaedah dan deskriptor kaedah.

function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // Modify the method's descriptor
}

• Penghias Hartanah : Fungsi yang menerima objek sasaran dan nama sifat.

function propertyDecorator(target: any, propertyKey: string) {
  // Modify the behavior of the property
}

• Penghias Parameter : Fungsi yang menerima sasaran, nama kaedah dan indeks parameter.

function parameterDecorator(target: any, propertyKey: string, parameterIndex: number) {
  // Modify or inspect the method's parameter
}

Menyampaikan Hujah kepada Penghias

Salah satu ciri penghias yang paling berkuasa ialah keupayaan mereka untuk mengambil hujah, membolehkan anda menyesuaikan tingkah laku mereka. Sebagai contoh, mari buat penghias kaedah yang merekodkan panggilan kaedah secara bersyarat berdasarkan hujah.

function logConditionally(shouldLog: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      if (shouldLog) {
        console.log(`Calling ${propertyKey} with arguments: ${args}`);
      }
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

class Example {
  @logConditionally(true)
  greet(name: string) {
    return `Hello, ${name}`;
  }
}

const example = new Example();
example.greet('TypeScript Developer');

Dengan menghantar benar kepada penghias logConditionally, kami memastikan kaedah tersebut mencatatkan pelaksanaannya. Jika kami lulus palsu, pembalakan dilangkau. Fleksibiliti ini adalah kunci untuk menjadikan penghias serba boleh dan boleh digunakan semula.

Aplikasi Penghias Dunia Sebenar

Penghias telah menemui kegunaan praktikal dalam banyak perpustakaan dan rangka kerja. Berikut ialah beberapa contoh ketara yang menggambarkan cara penghias menyelaraskan fungsi kompleks:

• Pengesahan dalam pengesah kelas: Dalam aplikasi dipacu data, pengesahan adalah penting. Pakej pengesah kelas menggunakan penghias untuk memudahkan proses pengesahan medan dalam kelas TypeScript.

import { IsEmail, IsNotEmpty } from 'class-validator';

class User {
  @IsNotEmpty()
  name: string;

  @IsEmail()
  email: string;
}

Dalam contoh ini, penghias @IsEmail dan @IsNotEmpty memastikan bahawa medan e-mel ialah alamat e-mel yang sah dan medan nama tidak kosong. Penghias ini menjimatkan masa dengan menghapuskan keperluan untuk logik pengesahan manual.

• Pemetaan Perkaitan Objek dengan TypeORM: Penghias digunakan secara meluas dalam rangka kerja ORM seperti TypeORM untuk memetakan kelas TypeScript ke jadual pangkalan data. Pemetaan ini dilakukan secara deklaratif menggunakan penghias.

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  email: string;
}

Di sini, @Entity, @Column dan @PrimaryGeneratedColumn mentakrifkan struktur jadual Pengguna. Penghias ini menghilangkan kerumitan penciptaan jadual SQL, menjadikan kod lebih mudah dibaca dan diselenggara.

• Suntikan Ketergantungan Sudut: Dalam Sudut, penghias memainkan peranan penting dalam mengurus perkhidmatan dan komponen. Penghias @Injectable menandakan kelas sebagai perkhidmatan yang boleh disuntik ke dalam komponen atau perkhidmatan lain.

@Injectable({
  providedIn: 'root',
})
class UserService {
  constructor(private http: HttpClient) {}
}

Penghias @Injectable dalam kes ini memberi isyarat kepada sistem suntikan kebergantungan Angular bahawa UserService harus disediakan secara global. Ini membolehkan penyepaduan perkhidmatan yang lancar merentas aplikasi.

Melaksanakan Penghias Anda Sendiri: Pecahan

Penghias adalah, pada terasnya, hanya berfungsi. Mari kita pecahkan proses mencipta penghias dari awal:

Class Decorator

A class decorator receives the constructor of the class and can be used to modify the class prototype or even replace the constructor.

function AddTimestamp(constructor: Function) {
  constructor.prototype.timestamp = new Date();
}

@AddTimestamp
class MyClass {
  id: number;
  constructor(id: number) {
    this.id = id;
  }
}

const instance = new MyClass(1);
console.log(instance.timestamp);  // Outputs the current timestamp

Method Decorator

A method decorator modifies the method descriptor, allowing you to alter the behavior of the method itself.

function logExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    console.log(`${propertyKey} executed in ${end - start}ms`);
    return result;
  };

  return descriptor;
}

class Service {
  @logExecutionTime
  execute() {
    // Simulate work
    for (let i = 0; i < 1e6; i++) {}
  }
}

const service = new Service();
service.execute();  // Logs the execution time

Property Decorator

A property decorator allows you to intercept property access and modification, which can be useful for tracking changes.

function trackChanges(target: any, propertyKey: string) {
  let value = target[propertyKey];

  const getter = () => value;
  const setter = (newValue: any) => {
    console.log(`${propertyKey} changed from ${value} to ${newValue}`);
    value = newValue;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
  });
}

class Product {
  @trackChanges
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(100);
product.price = 200;  // Logs the change

Conclusion

Decorators in TypeScript allow you to abstract and reuse functionality in a clean, declarative manner. Whether you're working with validation, ORMs, or dependency injection, decorators help reduce boilerplate and keep your code modular and maintainable. Understanding how they work from first principles makes it easier to leverage their full potential and craft custom solutions tailored to your application.

By taking a deeper look at the structure and real-world applications of decorators, you've now seen how they can simplify complex coding tasks and streamline code across various domains.

Atas ialah kandungan terperinci Memahami Penghias dalam TypeScript: Pendekatan Prinsip Pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!