Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

12 views

Published on

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.

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Daniel Ostrovsky Falling in Love With Decorators PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
  2. 2. 2 Falling in Love With Decorators. By Daniel Ostrovsky Web Team Lead at Kaltura @danduh81 @danduh
  3. 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. 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. 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. 6. 6 Proposal Yehuda Katz 2015
  7. 7. 7 Proposal HEY!!! You GOT a Wrong Guy!!!
  8. 8. 8 Proposal Yehuda Katz GitHub: wycats https://yehudakatz.com/
  9. 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. 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. 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. 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. 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. 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. 15. Краще один раз кодувати ніж тисячу разів, слухати про те, як саме. A coding is worth a thousand words….
  16. 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
  17. 17. THANK YOU!!!Articles @danduh81

×