Explain the arrow function syntax in TypeScript

If you have worked with other programming languages, such as Python, you have heard about lambda functions. The arrow function is similar to the lambda function, which provides a shorter way to define the function inside TypeScript.

We can create the function without a ‘function’ keyword by using the fat arrow and storing it inside the variable. After that, we can use that variable to invoke the function whenever required.

Also, the arrow function doesn’t have any identity, as it is anonymous. So, we can identify it using the variable in which we have stored it.

Syntax

Users can follow the syntax below to create an arrow function in TypeScript.

var variable = (param1: type, ...other params): return_type => {
   // code for the function
};

In the above syntax, users can see that we have stored the arrow function inside the variable and used the fat arrow to create an arrow function. Also, users can observe how we can pass the parameters to the arrow function and define its return type.

Example

In the example below, we have created the arrow function and stored it inside the showMessage variable. We have printed the message in the arrow function to show users.

// creating the anonymous arrow function
var showMessage = () => {
   console.log("Your welcome on the TutorialsPoint!");
};

// calling the arrow function.
showMessage();

On compiling, it will generate the following JavaScript code −

// creating the anonymous arrow function
var showMessage = function () {
   console.log("Your welcome on the TutorialsPoint!");
};

// calling the arrow function.
showMessage();

Example

In this example, we have stored the arrow function inside the mergeString variable. We have passed the three parameters of string type in the arrow function. Inside the arrow function, we merge the strings we got from the parameter and print them.

We have invoked the arrow function by using the mergeString variable and passing three parameters.

// creating the anonymous arrow function
var mergeString = (str1: string, str2: string, str3: string) => {
   
   // merging the string
   let finalString: string = str1 + str2 + str3;
   console.log("The merged string is " + finalString);
};

// calling the arrow function.
mergeString("Hi", "Users", "!");

On compiling, it will generate the following JavaScript code −

// creating the anonymous arrow function
var mergeString = function (str1, str2, str3) {
   
   // merging the string
   var finalString = str1 + str2 + str3;
   console.log("The merged string is " + finalString);
};

// calling the arrow function.
mergeString("Hi", "Users", "!");

Example

In this example, we have defined the return type also for the arrow function. The arrow function takes two parameters of type numbers and returns the number value after multiplying the parameters.

// defining the test arrow function

// param1 is of type number, and param2 is also of type number

// return type is the number
var test = (param1: number, param2: number): number => {
   console.log("The value of the param1 is " + param1);
   console.log("The value of the param2 is " + param2);
   return param1 * param2;
};

// calling the test function and printing its return value
let res: number = test(10, 20);
console.log("The value of the multiplication is " + res);

On compiling, it will generate the following JavaScript code −

// defining the test arrow function

// param1 is of type number, and param2 is also of type number

// return type is the number
var test = function (param1, param2) {
   console.log("The value of the param1 is " + param1);
   console.log("The value of the param2 is " + param2);
   return param1 * param2;
};

// calling the test function and printing its return value
var res = test(10, 20);
console.log("The value of the multiplication is " + res);

Example

In the example below, we have created the employee class, which contains the get_name() property. We have initialized the get_name() property with the arrow function, which returns the employee's name.

After that, we created the object of the employee class and invoked the get_namme() method by taking the object as a reference.

class employee {
   
   // defining the get_name arrow function
   get_name = (): string => {
      let emp_name: string = "Shubham";
      return "The employee name is " + emp_name;
   };
}

// creating the object of the employee class
let emp_object = new employee();

// calling the get_name() function of employee class
console.log(emp_object.get_name());

On compiling, it will generate the following JavaScript code −

var employee = /** @class */ (function () {
   function employee() {
      
      // defining the get_name arrow function
      this.get_name = function () {
         var emp_name = "Shubham";
         return "The employee name is " + emp_name;
      };
   }
   return employee;
}());

// creating the object of the employee class
var emp_object = new employee();

// calling the get_name() function of employee class
console.log(emp_object.get_name());

Users learned to use the arrow functions in TypeScript with examples in this tutorial. We have taken the different examples of arrow functions containing parameters and return types in this tutorial. Also, we have learned to use the arrow syntax to define the method of the particular class.