(<< Back <<) TS Decorator (<< Back <<)
Decorator
@C @D class Person {}
the same as
C(D(class Person()))
![](/TsLecture/MaxTs256_1.png)
![](/TsLecture/MaxTs221_1.png)
![](/TsLecture/MaxTs222_1.png)
Maximilian Schwarzmüller Typescript Lecture notes.
1 - Module Introduction.mp4 2 - A First Class Decorator.mp4 3 - Working with Decorator Factories.mp4 4 - Building More Useful Decorators.mp4 5 - Adding Multiple Decorators.mp4 6 - Diving into Property Decorators.mp4 7 - Accessor & Parameter Decorators.mp4 8 - When Do Decorators Execute.mp4 9 - Returning (and changing) a Class in a Class Decorator.mp4 10 - Other Decorator Return Types.mp4 11 - Example Creating an Autobind Decorator.mp4 12 - Validation with Decorators - First Steps.mp4 13 - Validation with Decorators - Finished.mp4 15 - Wrap Up.mp4
Firstly need to support decorator on Typescript configuration, for convention Decorator (like Class) we named with Capital later.
![](/TsLecture/MaxTs223_1.png)
![](/TsLecture/MaxTs224_1.png)
Decorator start with "@", decorator works when JS engine find class definition, not when class instantiated
![](/TsLecture/MaxTs225_1.png)
![](/TsLecture/MaxTs226_1.png)
Constructor:Function - this is decorator factory
![](/TsLecture/MaxTs227_1.png)
![](/TsLecture/MaxTs228_1.png)
Function return Function - in this case we can use Decorator as Function
![](/TsLecture/MaxTs229_1.png)
We can pass parameters to Decorator Function
![](/TsLecture/MaxTs231_1.png)
![](/TsLecture/MaxTs232_1.png)
More useful decorator, we will pass DIV ID as parameter
![](/TsLecture/MaxTs233_1.png)
![](/TsLecture/MaxTs234_1.png)
Typescript understand what we doing and bind DIV ID from HTML template to Decorator function
![](/TsLecture/MaxTs235_1.png)
Next step is pass template string to decorator function
![](/TsLecture/MaxTs236_1.png)
"_" underscore mean that parameters require by function interface and we will not use this parameter, this way allow delete warning
![](/TsLecture/MaxTs237_1.png)
![](/TsLecture/MaxTs238_1.png)
We pass HTML template to decorator and on this way HTML will pass to page
![](/TsLecture/MaxTs239_1.png)
![](/TsLecture/MaxTs240_1.png)
![](/TsLecture/MaxTs241_1.png)
Next step is changing constructor type to Any, this allow to create new constructor
![](/TsLecture/MaxTs242_1.png)
Use "!" exclamation mark to guarantee as HTML element present
![](/TsLecture/MaxTs243_1.png)
In this way we can access to class what we decorate
![](/TsLecture/MaxTs244_1.png)
![](/TsLecture/MaxTs245_1.png)
![](/TsLecture/MaxTs247_1.png)
![](/TsLecture/MaxTs248_1.png)
![](/TsLecture/MaxTs249_1.png)
This way used Angular to whole Angular framework to pass HTML template to code
![](/TsLecture/MaxTs246_1.png)
Multiple decorator. Bottom decorator working firstly.
![](/TsLecture/MaxTs250_1.png)
![](/TsLecture/MaxTs251_1.png)
This is two types of decorators - Logger factory and Template factory
![](/TsLecture/MaxTs252_1.png)
![](/TsLecture/MaxTs253_1.png)
We can add decorator to Method Accessor, Class, Property, Method Parameter - only interface has difference. This is Poperty decorator common interface (with Symbol)
![](/TsLecture/MaxTs1148_1.png)
Property decorator working when class registered on JS engine, the same of Get/Set Accessor. Prototype is instance of Accessor or Property
![](/TsLecture/MaxTs1149_1.png)
![](/TsLecture/MaxTs1150_1.png)
![](/TsLecture/MaxTs1151_1.png)
![](/TsLecture/MaxTs1153_1.png)
![](/TsLecture/MaxTs1152_1.png)
Full method decorator interface woth Symbol
![](/TsLecture/MaxTs1154_1.png)
![](/TsLecture/MaxTs1156_1.png)
![](/TsLecture/MaxTs1155_1.png)
And Parameter decorator
![](/TsLecture/MaxTs1157_1.png)
![](/TsLecture/MaxTs1158_1.png)
![](/TsLecture/MaxTs1159_1.png)
![](/TsLecture/MaxTs1160_1.png)
![](/TsLecture/MaxTs1161_1.png)
And check order of Decorator - https://stackoverflow.com/questions/46758235/what-is-the-decorator-running-order
Any Decorator working when JS engine faced with class, not when class instantiated.
![](/TsLecture/MaxTs1162_1.png)
Now we will change TemplateFactory decorator, we will create it as class extended Constructor and we will used Super (MyBase), to execute constructor, new Constructor function will replace original constructor function with new extra logic.
so, now We will create decorator factory
![](/TsLecture/MaxTs1163_1.png)
![](/TsLecture/MaxTs1164_1.png)
![](/TsLecture/MaxTs1165_1.png)
![](/TsLecture/MaxTs1166_1.png)
![](/TsLecture/MaxTs1167_1.png)
Generic '<T extends { new (... args: any []): () } >' allow accept any parameters
![](/TsLecture/MaxTs1168_1.png)
So currently we can accept any parameters of Class constructor and Pass they to new generated constructor
![](/TsLecture/MaxTs1169_1.png)
![](/TsLecture/MaxTs1170_1.png)
Currently class '{}' is Anonymous class with Anonymous method
![](/TsLecture/MaxTs1171_1.png)
But we need define base class with Name property instead '{}'
![](/TsLecture/MaxTs1172_1.png)
![](/TsLecture/MaxTs1173_1.png)
So, currently class to be decorated must have property Text
![](/TsLecture/MaxTs1174_1.png)
![](/TsLecture/MaxTs1175_1.png)
![](/TsLecture/MaxTs1176_1.png)
And last replacing is mark ...args as _... to avoid TS warning
![](/TsLecture/MaxTs1177_1.png)
![](/TsLecture/MaxTs1178_1.png)
And finally all working, Decorated transformed base class and pass Text value inside <H1> tag
![](/TsLecture/MaxTs1179_1.png)
But If we don't instantiate class, Template decorator don't working
![](/TsLecture/MaxTs1180_1.png)
Because document not exists and don't rendered
![](/TsLecture/MaxTs1181_1.png)
So, we replace original class constructor with new class constructor with new Extra logic
![](/TsLecture/MaxTs1182_1.png)
![](/TsLecture/MaxTs1183_1.png)
When we call Super we save original function, and we save original class but we replace original class with new extra logic. And that extra logic working not when class defined, but when class instantiated
![](/TsLecture/MaxTs1184_1.png)
Decorator can return anything, but TS will ignore what decorator retutn
![](/TsLecture/MaxTs1185_1.png)
But we can change options of Method of Accessor, for example Configurable, Enumerable
![](/TsLecture/MaxTs1186_1.png)
![](/TsLecture/MaxTs1187_1.png)
![](/TsLecture/MaxTs1188_1.png)
So, decorator can return new PropertyDescriptor, PropertyDescriptor is a JS functionality
![](/TsLecture/MaxTs1189_1.png)
JS Bind() and AutoBound decorator
Start with simple class, bind EventListener and try to call method class from event listener
![](/TsLecture/MaxTs1190_1.png)
![](/TsLecture/MaxTs1191_1.png)
![](/TsLecture/MaxTs1192_1.png)
![](/TsLecture/MaxTs1193_1.png)
![](/TsLecture/MaxTs1194_1.png)
![](/TsLecture/MaxTs1195_1.png)
Result is Undefined, because This is different on EventListener and Class
![](/TsLecture/MaxTs1196_1.png)
![](/TsLecture/MaxTs1197_1.png)
![](/TsLecture/MaxTs1198_1.png)
![](/TsLecture/MaxTs1199_1.png)
![](/TsLecture/MaxTs1200_1.png)
First parameter of Bind is This, and on that eventHandler we fix ShowMessage to exemplar of class P, but this is just JS not TS.
![](/TsLecture/MaxTs1202_1.png)
For TS we will create decorator Antobind() what change context from Button.EventHandler to Class exemplar.
![](/TsLecture/MaxTs1203_1.png)
Parameters of Method decorator, (1) Target is Prototype because we use Instance method, (2) MethodName or PropertyName, (3) ProertyDescriptor
![](/TsLecture/MaxTs1204_1.png)
![](/TsLecture/MaxTs1205_1.png)
Value is function we decorate
![](/TsLecture/MaxTs1206_1.png)
![](/TsLecture/MaxTs1207_1.png)
![](/TsLecture/MaxTs1208_1.png)
AdjustDescriptor we want to Return with new Accessor
![](/TsLecture/MaxTs1209_1.png)
![](/TsLecture/MaxTs1210_1.png)
And override This by Bound()
![](/TsLecture/MaxTs1211_1.png)
And return new PropertyDescriptor with overriding original method
![](/TsLecture/MaxTs1212_1.png)
![](/TsLecture/MaxTs1213_1.png)
Currently we decorate method and call it directly without Bind on code, it working!
![](/TsLecture/MaxTs1214_1.png)
![](/TsLecture/MaxTs1215_1.png)
![](/TsLecture/MaxTs1216_1.png)
![](/TsLecture/MaxTs1217_1.png)
Validation decorator, we add Form, Submit button and Input fields
![](/TsLecture/MaxTs1218_1.png)
![](/TsLecture/MaxTs1219_1.png)
Get Reference of Input and convert text to Digital by '+'
![](/TsLecture/MaxTs1220_1.png)
![](/TsLecture/MaxTs1221_1.png)
This is JS Way of validation
![](/TsLecture/MaxTs1222_1.png)
This is TS validations with decorators
![](/TsLecture/MaxTs1223_1.png)
![](/TsLecture/MaxTs1224_1.png)
![](/TsLecture/MaxTs1225_1.png)
This is full code of TS decorator with bug fixing
![](/TsLecture/MaxTs1226_1.png)
Related pages
- Angular documentation
- Typescript documentation
- Javascript documentation
- ECMAScript ES6 vs Typescript
- React vs Angular
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
![](http://forum.vb-net.com/GetTopicCount.png?id=52475b70-2796-4553-a442-ba3a4d12f058)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |