decorators.ts

// function Logger(logString: string) {
// 	return function (constructor: Function) {
// 		console.log(logString);
// 		console.log(constructor);
// 	};
// }

// function WithTemplate(template: string, hookId: string) {
// 	return function (constructor: Function) {
// 		const hookEl = document.getElementById(hookId);
//         const p = new constructor()
// 		if (hookEl) {
// 			hookEl.innerHTML = template;
//             hookEl.querySelector('h1')!.textContent = p.name
// 		}
// 	};
// }

// @Logger('LOGGING - PERSON')
// @WithTemplate('<h1>My Person Object</h1>', 'app')
// class Person {
// 	name = 'Jon';
// 	constructor() {
// 		console.log('creating person object...');
// 	}
// }

// const pers = new Person();

// console.log(pers);

function Log(target: any, propertyName: string | Symbol) {
	console.log('Property Decorator');
	console.log(propertyName, target);
}

function Log2(target: any, name: string, desc: PropertyDescriptor) {
	console.log('Accessor decorator!');
	console.log(target);
	console.log(name);
	console.log(desc);
}
function Log3(target: any, name: string | Symbol, desc: PropertyDescriptor) {
	console.log('Method decorator!');
	console.log(target);
	console.log(name);
	console.log(desc);
}
function Log4(target: any, name: string | Symbol, position: number) {
	console.log('Parameter decorator!');
	console.log(target);
	console.log(name);
	console.log(position);
}

class Product {
	@Log
	title: string;
	private _price: number;
	constructor(t: string, p: number) {
		this.title = t;
		this._price = p;
	}
	@Log2
	set price(val: number) {
		if (val > 0) {
			this._price = val;
		} else {
			throw new Error('Invalid price - should be positive!');
		}
	}
	@Log3
	getPriceWithTax(@Log4 tax: number) {
		return this._price * (1 + tax);
	}
}