Rumah > hujung hadapan web > tutorial js > Penghias dalam TypeScript

Penghias dalam TypeScript

DDD
Lepaskan: 2024-12-06 18:06:16
asal
327 orang telah melayarinya

Les Décorateurs en 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
  }
}
Salin selepas log masuk
Salin selepas log masuk

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;
    };
}
Salin selepas log masuk
Salin selepas log masuk

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}`);
    }
}
Salin selepas log masuk

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
Salin selepas log masuk

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,
        });
    };
}
Salin selepas log masuk

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
  }
}
Salin selepas log masuk
Salin selepas log masuk

Langkah 3: Uji Penghias Input

Tukar sifat untuk melihat kesannya.

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

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan