Décorateurs de Classe

Constructor tracker

Track est une factory qui retourne un "decorator".

Le décorateur prend en paramètretarget, la référence de la classe et retourne une nouvelle classe.

const Track = () => {
return (target) => {
const Klass = function (...args) {
console.log(`new ${target.name}(${args})`);
target.constructor.apply(this, args);
};
Object.assign(Klass.prototype, target.prototype);
return Klass as any;
};
};
@Track()
class Customer {
constructor(public firstName?: string) {
}
}
let customer = new Customer(); // new Customer()
customer = new Customer('Foo'); // new Customer(Foo)

Custom element decorator

Cet exemple de factory prend des paramètres permettant de personnaliser le décorateur.

const CustomElement = ({selector, template}) => (target) => {
class Element extends HTMLElement {
}
Object.assign(Element.prototype, {
connectedCallback() {
this.innerHTML = template;
return target.connectedCallback.bind(this)();
}
});
customElements.define(selector, Element);
return Element as any;
};
@CustomElement({
selector: 'wt-angular-guide',
template: `<a href="https://angular-guide.wishtack.io">Angular Guide</a>`
})
class AngularGuide {
connectedCallback() {
console.log('YEAY!');
}
}

Essayez :

tsc playground.ts --experimentalDecorators --target es2015

Puis copier le résultat JavaScript dans la console de votre navigateur et insérer des éléments <wt-angular-guide> sur votre page.