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. 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

6. 6
Proposal
Yehuda Katz
2015

7. 7
Proposal
HEY!!!
You GOT a Wrong Guy!!!

8. 8
Proposal
Yehuda Katz
GitHub: wycats
https://yehudakatz.com/

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

17. THANK YOU!!!Articles
@danduh81