Tartalomjegyzék

< TypeScript

TypeScript dekorátor

Osztály dekorálása

Példa 00

function log(target: any) {
    console.log(typeof target)
}
 
@log
class Valami { }
 
new Valami()

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: 

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

Példa 01

Adattag hozzáadása:

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.
app.ts
const Ageman = (constructor: Function) => {
    constructor.prototype.age = 43;
}
 
@Ageman
class Man {}
 
const man = new Man();
console.log(man['age']);

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

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

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

app.ts
const Ageman = (constructor: Function) => {
    constructor.prototype.age = 43;
}
 
@Ageman
class Man {
    age!: number;
}
 
const man = new Man();
console.log(man.age);

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

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);

Példa 02

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 );

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

Példa paraméterrel

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);

Metódus dekorálása

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();

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ó:

tsconfig.json
{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

Egy összetettebb tsconfig.json fájl:

tsconfig.json
{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es6",
        "experimentalDecorators": true
    }
}

Linkek