Links

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.