• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2021, 2022, 2023, 2024
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

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
  }
}

Adattag hozzáadása:

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.

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

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.

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

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
    }
}

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