Decorators
In order to use decorators in our code, make sure that in tsconfig file,"target": "es5",
,"experimentalDecorators": true,
function Logger(constructor: Function){
console.log("Logging...");
console.log(constructor);
}
@Logger
class Person {
name ="TEJA";
constructor(){
console.log("creating a person object...");
}
}
const pers = new Person();
console.log(pers);
Factory Decorator:
From the above example, In Logger function, we have used one more constructor function
and call it via decorator. Therefore it help to call the class by default in app.ts and also we can call other set of functions on load.
function Logger(logString: string){
return function(constructor: Function){
console.log(logString);
console.log(constructor);
}
}
@Logger('LOGGING - PERSON')
class Person {
name ="TEJA";
constructor(){
console.log("creating a person object...");
}
}
const pers = new Person();
console.log(pers);
Decorator function how to render in HTML with function and classes
function Logger(logString: string){
return function(constructor: Function){
console.log(logString);
console.log(constructor);
}
}
function withTemplate(template: string, hookId: string){
return function(constructor: any){
const hookEL = document.getElementById(hookId);
const p = new constructor();
if(hookEL){
hookEL.innerHTML = template;
hookEL.querySelector("h1")!.textContent = p.name;
}
}
}
@withTemplate("<h1>My Person Object</h1>","app")
//@Logger('LOGGING - PERSON')
class Person {
name ="TEJA";
constructor(){
console.log("creating a person object...");
}
}
const pers = new Person();
console.log(pers);
NOTE: Decorator always receives at least two arguments with properties
Property Decorator:
//Property Decorators
function LOG(target: any, propertyName: string| symbol){
console.log(target, propertyName);
console.log("Property decorator");
}
class Product {
@LOG
title: string;
private _price: number;
set price(val: number){
if(val > 0){
this._price = val;
}
else{
throw new Error("Invalid Price!!");
}
}
constructor(t: string, p: number){
this.title = t;
this._price = p;
}
getTaxWithPrice(tax: number){
return this._price * (1 + tax);
}
}
//since the class is registered with the javascript, property decorator executes automatically.
//Property Decorators
function LOG(target: any, propertyName: string| symbol){
console.log("Property decorator!");
console.log(target, propertyName);
}
//Accessory Decorator example LOG2
function LOG2(target: any, name: string, descriptor: PropertyDescriptor){
console.log("Accessor Decorator!");
console.log(target);
console.log(name);
console.log(descriptor);
}
//Add decorators to methods
function LOG3(target:any, name:string| Symbol, descriptor: PropertyDescriptor){
console.log("Method Decorator!");
console.log(target);
console.log(name);
console.log(descriptor);
}
//Now Add parametor to a decorator
function LOG4(target: any, name: string| Symbol,position: number){
console.log("Position Decorator!");
console.log(target);
console.log(name);
console.log(position);
}
class Product {
@LOG
title: string;
private _price: number;
@LOG2
set price(val: number){
if(val > 0){
this._price = val;
}
else{
throw new Error("Invalid Price!!");
}
}
constructor(t: string, p: number){
this.title = t;
this._price = p;
}
@LOG3
getTaxWithPrice(@LOG4 tax: number){
return this._price * (1 + tax);
}
}
//since the class is registered with the javascript, property decorator executes automatically.
If there is any library we are referring in our project, Decorators will help us on heavy use.
Comments
Post a Comment