際際滷

際際滷Share a Scribd company logo

JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript

J
JSFestUA

Decorators are part of proposal TC39 (stage 2), this means that sooner or later decorators will become a part of the JS. However, there is no need to wait! We can use decorators in JavaScript (with babel) and in TypeScript. Let's see how decorators can extend the functionality of classes and methods in a clean and declarative fashion. And many other things which gives you more flexibility.

1 of 17
Daniel Ostrovsky Falling in Love With Decorators PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER 19 KYIV, UKRAINE
2 Falling in Love With Decorators. By Daniel Ostrovsky Web Team Lead at Kaltura @danduh81 @danduh
3 What decorators is? When do we need it and when not. Property decorators Method decorators Class decorators Arguments decorators (TS) And many more Subject
4 What decorators is? Design pattern. One of the twenty-three well-known GoF design patterns. Extend the functionality of classes and methods in a clean and declarative fashion.
5 Disclaimer Decorators are currently at Stage II as part of TC39's process. Angular, Nest.Js, Stencil, MobX, core-decorators, ember-decorators, lodash-decorators
6 Proposal Yehuda Katz 2015
7 Proposal HEY!!! You GOT a Wrong Guy!!!
8 Proposal Yehuda Katz GitHub: wycats https://yehudakatz.com/
9 Proposal A decorator is: an expression that evaluates to a function that takes the target, name, and property descriptor as arguments and optionally returns a property descriptor to install on the target object https://github.com/tc39/proposal-decorators
10 Common Use Cases Functional o Helpers o Logger o Performance measuring Web Worker runner Validators Class mixing/composite Code analysing Memoization Access control and authentication **Additional functionality And many more
11 Descriptor let todoObj = { summary: 'Write article about descriptors', assigned: 'me', deadLine: 1602280800 }; let descriptor = Object.getOwnPropertyDescriptor(todoObj, 'deadLine'); console.log(descriptor); // Output: { value: 1602280800, writable: true, enumerable: true, configurable: true }
12 Descriptor // Output: { value: 1602280800, writable: true, enumerable: true, configurable: true } value - actual property value writable - is value of this property can be changed enumerable - is this property is enterable, is it can be used in for (let key of todoObj) {} / Object.keys(todoObj) configurable - is entire descriptor can be changed
The way we can call higher-order function. Function that takes another functions, extends its behaviour (without modifying it) and returns it. @ indicator for parser, that we using decorator. readOnly - name of our higher-order function. Class member @Decorator (methods/properties) 13 export function readOnly(target, key, descriptor) { descriptor.writable = false; return descriptor; } class TodoObject{ @readOnly timeLeft(){} }
target - class - TodoObject key - decorated method/property name - timeLeft descriptor - descriptor object of decorated method/property Class member @Decorator (methods/properties) 14 export function readOnly(target, key, descriptor) { descriptor.writable = false; return descriptor; } class TodoObject{ @readOnly timeLeft(){} } const descriptor = Object.getOwnPropertyDescriptor(TodoItem, 'timeLeft');
舒亠 仂亟亳仆 舒亰 从仂亟于舒亳 仆亢 亳 舒亰于, 仍舒亳 仗仂 亠, 磻 舒仄亠. A coding is worth a thousand words.
Class decorator accepts target (class) and returns constructor. constructor - is nothing but a function which is used to add prototype methods and define some initial values. Class Decorators
THANK YOU!!!Articles @danduh81

More Related Content

JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript

  • 1. Daniel Ostrovsky Falling in Love With Decorators PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER 19 KYIV, UKRAINE
  • 2. 2 Falling in Love With Decorators. By Daniel Ostrovsky Web Team Lead at Kaltura @danduh81 @danduh
  • 3. 3 What decorators is? When do we need it and when not. Property decorators Method decorators Class decorators Arguments decorators (TS) And many more Subject
  • 4. 4 What decorators is? Design pattern. One of the twenty-three well-known GoF design patterns. Extend the functionality of classes and methods in a clean and declarative fashion.
  • 5. 5 Disclaimer Decorators are currently at Stage II as part of TC39's process. Angular, Nest.Js, Stencil, MobX, core-decorators, ember-decorators, lodash-decorators
  • 9. 9 Proposal A decorator is: an expression that evaluates to a function that takes the target, name, and property descriptor as arguments and optionally returns a property descriptor to install on the target object https://github.com/tc39/proposal-decorators
  • 10. 10 Common Use Cases Functional o Helpers o Logger o Performance measuring Web Worker runner Validators Class mixing/composite Code analysing Memoization Access control and authentication **Additional functionality And many more
  • 11. 11 Descriptor let todoObj = { summary: 'Write article about descriptors', assigned: 'me', deadLine: 1602280800 }; let descriptor = Object.getOwnPropertyDescriptor(todoObj, 'deadLine'); console.log(descriptor); // Output: { value: 1602280800, writable: true, enumerable: true, configurable: true }
  • 12. 12 Descriptor // Output: { value: 1602280800, writable: true, enumerable: true, configurable: true } value - actual property value writable - is value of this property can be changed enumerable - is this property is enterable, is it can be used in for (let key of todoObj) {} / Object.keys(todoObj) configurable - is entire descriptor can be changed
  • 13. The way we can call higher-order function. Function that takes another functions, extends its behaviour (without modifying it) and returns it. @ indicator for parser, that we using decorator. readOnly - name of our higher-order function. Class member @Decorator (methods/properties) 13 export function readOnly(target, key, descriptor) { descriptor.writable = false; return descriptor; } class TodoObject{ @readOnly timeLeft(){} }
  • 14. target - class - TodoObject key - decorated method/property name - timeLeft descriptor - descriptor object of decorated method/property Class member @Decorator (methods/properties) 14 export function readOnly(target, key, descriptor) { descriptor.writable = false; return descriptor; } class TodoObject{ @readOnly timeLeft(){} } const descriptor = Object.getOwnPropertyDescriptor(TodoItem, 'timeLeft');
  • 15. 舒亠 仂亟亳仆 舒亰 从仂亟于舒亳 仆亢 亳 舒亰于, 仍舒亳 仗仂 亠, 磻 舒仄亠. A coding is worth a thousand words.
  • 16. Class decorator accepts target (class) and returns constructor. constructor - is nothing but a function which is used to add prototype methods and define some initial values. Class Decorators
AboutCopyright
息 2025 際際滷