| ☰ See All Chapters |
TypeScript Method Decorators
In a JavaScript object, a method is like any other property except that it defines a function. For this reason, method decorators have a lot in common with property decorators. While a property decorator returns a replacement property, a method decorator returns a function definition to replace the old one. While working with method decorators set the target option to “es5” as shown below:
{ "include":["WebContent/ts/*"], "compilerOptions": { "noEmitOnError": true, "outDir":"WebContent/js", "noImplicitAny" : true, "experimentalDecorators":true, "target":"es5" } } |
Property decorator syntax :
function methodDecoratorName(param1: any, param2: string, param3: TypedPropertyDescriptor<T>) TypedPropertyDescriptor < T > { } |
The first two arguments are like those of a property decorator.
param1: provides the object containing the method
param2: identifies the method's name.
param3: Provides the object which is an implementaion of TypedPropertyDescriptor<T> interface, which is defined in the following way:
interface TypedPropertyDescriptor<T> { enumerable?: boolean; configurable?: boolean; writable?: boolean; value?: T; get?: () => T; set?: (value: T) => void; } |
Property decorator should return object which should be an implementation of TypedPropertyDescriptor<T> interface. In the below code we are returning same object which is a parameter of decorator itself. But before returning we are modifying the function.
Whenerver a decorated method is detected, typescript will inject values/objects to these parameters of decorator.
TypeScript Method Decorators Example
methodDecoratorDemo.ts
function prependTilde(target: Object, key: string, desc: any) { // Store original function let origMethod = desc.value; // Define new function desc.value = function(...args: any[]) { let result = origMethod.apply(this, args); return "~".concat(result); } return desc; } class OddPunctuation { @prependTilde appendExclamation(arg: string): string { return arg.concat("!"); } }
let oddPunctuationInstance: OddPunctuation = new OddPunctuation(); let a: String = oddPunctuationInstance.appendExclamation("Hello Manu M"); document.write('</br>' + a); |
tsconfig.json
{ "include":["WebContent/ts/*"], "compilerOptions": { "noEmitOnError": true, "outDir":"WebContent/js", "noImplicitAny" : true, "experimentalDecorators":true, "target":"es5" } } |
welcome.html
<!DOCTYPE html> <html> <body> <script src="../js/methodDecoratorDemo.js"></script> </body> </html> |
File Structure
Output
All Chapters
