Penghias dalam TypeScript

Penghias dalam TypeScript ialah ciri berkuasa yang membolehkan anda menambah metadata atau mengubah suai gelagat kelas, kaedah, sifat atau parameter. Ia sering digunakan dalam rangka kerja seperti Angular untuk memperkayakan komponen dan perkhidmatan. Sama ada anda seorang pemula atau pembangun yang berpengalaman, artikel ini membimbing anda langkah demi langkah untuk mencipta penghias anda sendiri untuk meningkatkan aplikasi TypeScript anda.

Prasyarat

Sebelum anda bermula, pastikan anda mempunyai yang berikut:

• Pemahaman asas tentang TypeScript.
• TypeScript dikonfigurasikan dengan pilihan experimentalDecorators didayakan dalam fail tsconfig.json anda:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Apa itu penghias?

Penghias ialah fungsi yang digunakan pada kelas, kaedah, sifat atau parameter. Didahului oleh simbol @, penghias boleh mengubah suai atau memperkayakan elemen yang dilampirkan. Kegunaan utamanya termasuklah:

• Tambah metadata: Berguna untuk memberikan maklumat tambahan tentang kelas atau harta benda.
• Ubah suai tingkah laku: membolehkan anda menukar operasi kaedah atau kelas secara dinamik.
• Menyuntik kebergantungan: praktikal dalam seni bina modular.

Mencipta Penghias Komponen

Langkah 1: Tentukan Penghias

Kami akan mencipta penghias yang menambahkan sifat componentName pada kelas.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

Penjelasan:

Penghias ini menerima rentetan nama dan menambahkannya sebagai sifat pada prototaip kelas. Semua kejadian kelas ini akan mempunyai akses kepada harta ini.

Langkah 2: Gunakan Penghias

Jom gunakan penghias ke kelas.

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

Langkah 3: Uji Penghias

Mari kita buat contoh kelas untuk menyemak cara ia berfungsi.

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

Mencipta Penghias Input

Langkah 1: Tentukan Penghias Input

Penghias ini memantau dan mencatat perubahan pada harta benda.

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

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

Penjelasan:

Penghias menggunakan Object.defineProperty untuk memintas perubahan pada harta tersebut. Ini membolehkan anda menambah logik tersuai, seperti pengelogan perubahan.

Langkah 2: Gunakan Penghias Input

Mari kita gunakan pada hartanah.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Langkah 3: Uji Penghias Input

Tukar sifat untuk melihat kesannya.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

Kesimpulan

Penghias TypeScript menyediakan cara yang elegan dan berkuasa untuk menambah kefungsian dan metadata pada kelas dan sifat anda. Dengan mengikuti artikel ini, anda telah belajar untuk:

1. Buat penghias komponen untuk memperkayakan kelas.
2. Laksanakan penghias input untuk memantau perubahan harta benda.

Contoh mudah ini menunjukkan cara penghias boleh meningkatkan kebolehbacaan dan kebolehselenggaraan kod anda. Terokai lebih banyak dokumentasi TypeScript rasmi untuk menemui aplikasi yang lebih maju, seperti menggunakan metadata tercermin dengan Reflect.metadata.

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