[[oktatas:web:typescript|< TypeScript]]

====== TypeScript dekorátor ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2022, 2023, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Osztály dekorálása =====
==== Példa 00 ====

<code javascript>
function log(target: any) {
    console.log(typeof target)
}

@log
class Valami { }

new Valami()
</code>

A Valami osztályból semmit nem valósítunk meg, mégis csinál valamit.
Kiírja saját a konstruktor típusát. 

Az any helyett írhattuk volna Function típust.

Szükséges beállítás:

<code javascript>
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
</code>

==== Példa 01 ====


Adattag hozzáadása:

<note important>
Ez a példa a típusellenőrzés szigorítása miatt nem működik, ha be van kapcsolva a "strict": true értékre.
</note>


<code javascript app.ts>
const Ageman = (constructor: Function) => {
    constructor.prototype.age = 43;
}

@Ageman
class Man {}

const man = new Man();
console.log(man['age']);

</code>

Ahol elkészítem a Man osztály, csak elé írom a @Ageman dekorátort és már van is age
adattagja.

<note tip>
A következő két példa típusellenőrzés mellett is használható.
</note>


Típus ellenőrzéssel is használható verzió:

<code javascript app.ts>
const Ageman = (constructor: Function) => {
    constructor.prototype.age = 43;
}

@Ageman
class Man {
    age!: number;
}

const man = new Man();
console.log(man.age);
</code>

Másik megoldás, szigorú típusellenőrzés esetén:

<code javascript app.ts>
const Ageman = (constructor: Function) => {
    constructor.prototype.age = 43;
}

@Ageman
class Man {
    /** 
     * Ez egy index aláírás
     * Lehetővé teszi dinamikus tulajdonságok
     * hozzáadását
     * A részek:
     * x: A kulcs bármilyen string típus lehet
     *    Tetszőlegesen más név is adható az
     *    x helyett, például key
     * any: Az érték bármilyen típust felvehet
     * 
    */
    [x: string]: any;
}

const man = new Man();
console.log(man.age);

</code>

==== Példa 02 ====

<code javascript app.ts>

function alap() {
    return function (constructor: Function) {
        constructor.prototype.fiz = 300;
    }
}


@alap()
class Dolgozo {
    [x: string]: any;
}

var mari = new Dolgozo();
console.log(mari.fiz );
</code>

A Dolgozo osztály üres, de kidekoráltuk az @alap() dekorátorral, így már van egy
fiz adattagja.

==== Példa paraméterrel ====

<code javascript app.ts>
function alapfiz(alap: number) {
    return function (constructor: Function) {
        constructor.prototype.fiz = alap;
    }
}

@alapfiz(300)
class Dolgozo {
    [x: string]: any;
}

var mari = new Dolgozo();
console.log(mari.fiz);


</code>

===== Metódus dekorálása =====

<code javascript app.ts>

function egy() {
    return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log('1-s dekorátor')
    }
}

class Dolgozo {

    @egy()
    valami() {}
}

var mari = new Dolgozo();
mari.valami();
</code>

A valami() metódus üres, de kidkoráltuk az @egy() dekorátorral, így csinál is valamit.

A konzolon megjelenő szöveg:
  1-s dekorátor


Szükséges kapcsoló:
<code javascript tsconfig.json>
{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}
</code>


Egy összetettebb tsconfig.json fájl:
<code javascript tsconfig.json>
{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es6",
        "experimentalDecorators": true
    }
}
</code>

===== Linkek =====

  * https://www.logicbig.com/tutorials/misc/typescript/class-decorators.html (2021)
  * https://www.typescriptlang.org/docs/handbook/decorators.html (2022)