Monat: August 2022

TypeScript Decorators and why you should use them

...log = ( target: (new () ...
...prototype (for non-static) propertyKey: string, // ...
...in the class descriptor: PropertyDescriptor // ...
...property ) => { // Save the ...
...given property value const original = ...
...original = descriptor.value; // Intercept the ...
...given property value descriptor.value = function ...
...function () { console.log("Hello"); ...
...() { console.log("Hello"); ...
...{ console.log("Hello"); ...
... console.log("Hello"); original(); ...
... console.log("Hello"); original(); ...
...console.log("Hello"); original(); }; ...
... original(); }; // ...
...original(); }; // Return the ...
...new property value return descriptor; }; This decorator ...
...snippet: class Test { @log public ...
...{ @log public static method() ...
...static method() { console.log("World"); ...
...method() { console.log("World"); ...
...{ console.log("World"); } } Test.method(); // ...
... console.log("World"); } } Test.method(); // => Hello // ...
...} } Test.method(); // => Hello // World Class ...
...=> Hello // World Class vs. ...
...Hello // World Class vs. Property ...
...snippet: @classDecorator class Test { @propertyDecorator private ...
...{ @propertyDecorator private _property: string ...
...string = ""; @methodDecorator public ...
...""; @methodDecorator public method(@parameterDecorator parameter: ...
...parameter: string) { console.log(`${this._property} ...
...string) { console.log(`${this._property} ${parameter} ...
...{ console.log(`${this._property} ${parameter} World!`); ...
...console.log(`${this._property} ${parameter} World!`); } @methodDecorator ...
...World!`); } @methodDecorator // method ...
...applied to accessor set property(value: string) ...
...property(value: string) { this._property ...
...string) { this._property = ...
...{ this._property = value; ...
...this._property = value; } } If you are ...
...PropertyDecorator = ( target: Object, ...
... target: Object, propertyKey: string | ...
...MethodDecorator = <T>( target: Object, ...
... target: Object, propertyKey: string | ...
...string | symbol, descriptor: TypedPropertyDescriptor<T> ) => ...
...ParameterDecorator = ( target: Object, ...
... target: Object, propertyKey: string | ...
...string | symbol, parameterIndex: number ) => ...
...descriptor) => { // target = ...
...of applied class // ...
...class // ...
... // ...
...// ...
... ...
... ...
... ...
... if ...
... if instance ...
... if instance method: ...
...of applied class // propertyKey = ...
...of the method // descriptor = ...
...accessors, enumerable, ...) return descriptor; }; const propertyDecorator: ...
...propertyKey) => { // target = ...
...of applied property, // ...
...property, // ...
... // ...
...// ...
... ...
... ...
... ...
... if ...
... if instance ...
... if instance property: ...
...of applied property // propertyKey = ...
...(target) => { // target = ...
...ParameterDecorator = ( target, propertyKey, ...
...( target, propertyKey, parameterIndex ) ...
...target, propertyKey, parameterIndex ) => { ...
...parameterIndex ) => { // target = ...
...applied method parameter, // ...
...parameter, // ...
... // ...
...// ...
... ...
... ...
... ...
... if ...
... if instance ...
... if instance method: ...
...applied method parameter // propertyKey = ...
...the method parameter // parameterIndex = ...
...pattern while leveraging to create parametrized ...
...MethodDecorator => { console.log("Init with logLevel:", ...
...with logLevel:", logLevel); return (_, _2, ...
...PropertyDescriptor) => { const ...
...=> { const originalValue ...
...{ const originalValue = ...
...originalValue = descriptor.value!; descriptor.value ...
...= descriptor.value!; descriptor.value = ...
...descriptor.value!; descriptor.value = () ...
...() => { ...
...=> { ...
...{ console("Method ...
... console("Method called"); ...
... console("Method called"); ...
... console("Method called"); ...
...console("Method called"); ...
...called"); originalValue(); ...
... originalValue(); ...
... originalValue(); ...
... originalValue(); }; ...
... originalValue(); }; ...
...originalValue(); }; ...
... }; return ...
... }; return descriptor; ...
...}; return descriptor; ...
... return descriptor; }; }; class Test { ...
...}; }; class Test { @log("error") public ...
...{ @log("error") public static method() ...
...with logLevel: error // Method ...
...logLevel: error // Method called // ...
...error // Method called // ...
... Method called // Method ...
...Method called // Method called Metadata There ...
...called // Method called Metadata There is ...
...once class Test { @Reflect.metadata("magic", 42) // ...
...use the decorators static text = ...
...number is: "; static doSomething() { ...
...static doSomething() { // ...
...doSomething() { // Then ...
...{ // Then you ...
...has some metadata // ...
...some metadata // Keep ...
...metadata // Keep in ...
...is also queried // ...
...also queried // e.g. ...
...queried // e.g. "design:type", ...
..."design:type", "design:paramtypes", etc. const ...
..."design:paramtypes", etc. const metadataKeys ...
...etc. const metadataKeys = ...
...= Reflect.getOwnMetadataKeys(Test, "text"); // ...
...Reflect.getOwnMetadataKeys(Test, "text"); // And ...
..."text"); // And then ...
...that metadata key // ...
...metadata key // Note: ...
...key // Note: in ...
...directly access , // ...
...access , // because ...
..., // because we ...
...metadata property specified // ...
...property specified // and ...
...specified // and the ...
...the design:type metadata const ...
...design:type metadata const magicNumber ...
...metadata const magicNumber = ...
...Reflect.getMetadata(metadataKeys, Test, "text"); console.log(Test.text ...
...Test, "text"); console.log(Test.text + ...
..."text"); console.log(Test.text + magicNumber); ...
...console.log(Test.text + magicNumber); } } Test.doSomething(); // => The ...

Anzeigen