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

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

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

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

More Related Content

Similar to JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript (20)

More from JSFestUA (20)

Recently uploaded (20)

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