TypeScript

Learning Property Decorator in TypeScript with Examples

In this post on Creating Parameter Decorators in TypeScript, I will explain another type of important decorator in TypeScript, which is the Parameter Decorator. However, we usually don’t use parameter decorators alone. Most of the time, they are used along with some other decorators like the method decorators.

Basically, the significance of parameter decorators lies in the fact that they provide extra information about a specific parameter of the method. Like other decorators, they add metadata to a parameter, still, their usage is restricted. For instance, parameter decorators can’t change the state of a parameter.

Creating Parameter Decorators in TypeScript

Like other decorators, a parameter decorator is also created with the help of a function that takes three arguments. As a matter of fact, the first argument is the target that refers to the object containing the corresponding method, whereas the second one is the propertyKey that refers to the method name. Finally, the decorator function takes parameterIndex as the last parameter that refers to the index of the parameter being decorated.

Examples of Creating Parameter Decorators

To begin with, let us first see how we create a parameter decorator. As shown in the following code, we define a class with the name MyClass that contains a property with name x, a constructor function, and a method that returns the sum of the value of property x, and the value of the parameter passed to the method.

class MyClass
{
	x: number;
	constructor(x:number)
	{
		this.x=x;
		console.log(`x = ${this.x}`);
	}
	findSum(i: number): number{
		return this.x+i;
	}
}

let ob1=new MyClass(34);
console.log("Sum = "+ob1.findSum(80));

Output

Parameter Decorators in TypeScript
A Class Containing Properties and Methods

Now that, we have defined our class, let us add a parameter decorator to the corresponding parameter. Basically, p is the parameter decorator that displays the metadata about the parameter.

function p(target:object, parameterKey:string, parameterIndex:number){
	console.log("The parameter takes any numeric value");
}

class MyClass
{
	x: number;
	constructor(x:number)
	{
		this.x=x;
		console.log(`x = ${this.x}`);
	}
	findSum(@p i: number): number{
		return this.x+i;
	}
}

let ob1=new MyClass(34);
console.log("Sum = "+ob1.findSum(80));

Output

A Parameter Decorator Displaying Metadata
A Parameter Decorator Displaying Metadata

Example to Display Metadata Using Parameter Decorators

To illustrate the parameter decorators further, let us define a few more methods in our class and apply the same parameter decorator to different parameters of these methods as shown below.

function p(target:object, parameterKey:string, parameterIndex:number){
	console.log("The parameter takes any numeric value");
 console.log("Target: ");
 console.log(target);
 console.log("Parameter Key: "+parameterKey);
 console.log("Parameter Index: "+parameterIndex);
 console.log();
}

class MyClass
{
	x: number;
	constructor(x:number)
	{
		this.x=x;
		console.log(`x = ${this.x}`);
	}
	findSum(@p i: number): number{
		return this.x+i;
	}
	findDivision(i: number, @p j:number): number{
		return i/j;
	}
	findProduct(i: number, @p j:number, @p k: number): number{
		return i*j*k;
	}
	findDifference(@p i: number, j:number): number{
		return i-j;
	}

}

let ob1=new MyClass(34);
console.log("Sum = "+ob1.findSum(80));
console.log();
console.log("Division = "+ob1.findDivision(80, 7));
console.log();
console.log("Product = "+ob1.findProduct(4, 19, 61));
console.log();
console.log("Difference = "+ob1.findDifference(80, 23));

Output

Parameter Decorator Displaying Metadata
Parameter Decorator Displaying Metadata

Furthermore, you can use the same decorator with more than one parameter of a method. For instance, see the signature of findProduct() method, where both the second and third parameters are using the same parameter decorator.

Parameter Decorator Example in TypeScript
Parameter Decorator Example in TypeScript

Summary

To sum up, the parameter decorators are one of the decorators in TypeScript. However, they are most restrictive in nature and only provide the metadata information about a parameter. Also, they are not used alone. Indeed, in most of their usage, we also create a method decorator along with the parameter decorator. Nevertheless, we generally use parameter decorators for displaying the metadata information and we can use the same decorator with any number of parameters in the same method as well as in other methods.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *