How To Set The Return Type Of A Arrow Function In TypeScript

Set the return type of a arrow function in TypeScript

Knowing how to set the return type of a arrow function in TypeScript will be very important to explicitly set the type for an arrow function and also help you easy to write and maintain code. So how to do it?Let’s go into detail.

Set the return type of a arrow function in TypeScript

Use colon

You can set the return type of an arrow function in Typescript by specifying the type after the colon between the bracket and the arrow.

Example:

const anFuction = (): string => {
    return "Hello From Learn Share IT";
};

console.log(anFuction());

Output:

[LOG]: "Hello From Learn Share IT"

As you see here, I set the string type for the returnLog arrow function by using a colon between the round bracket and the arrow symbol.

Some common error case

If you set the return type of an arrow function, you will get the error if you did not set the return type.

Example:

const returnNumber = ():number=>{
    // Return 'Hello From Learn Share IT'
}
  
console.log(returnNumber())

The error:

A function whose declared type is neither 'void' nor 'any' must return a value.

Here I get the error because I make sure that my arrow will return the type number, so it must be. If I do not return anything, the return arrow function will be void which means I do not return any value and I get the error.

Or if you set the return type of the arrow function to this type, but in execution, the arrow function returns another type, it also leads to an error.

Example:

const returnLog = (): string => {
    return 9;
};
  
console.log(returnLog());

The error:

Type 'number' is not assignable to type 'string'.

Here number nine is the number type, but I set the return type of the arrow function as a string, and it will lead to an error.

Use with the union type

If you are not sure what the return type is, you can use the union type.

Example:

const returnValue = (val: string | number): string | number => {
    return val;
};
  
console.log(returnValue("Hello From Learn Share IT"));
console.log(returnValue(8));

Output:

[LOG]: "Hello From Learn Share IT" 
[LOG]: 8

Here I set the return type that can return both string and number type values.

Or you can use any type. It will make your arrow function can return any type.

Example:

const returnValue = (val: any): any => {
    return val;
};
  
console.log(returnValue({ name: "Toan" }));
console.log(returnValue([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));

Output:

[LOG]: { "name": "Toan" } 
[LOG]: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Summary

In this article, I showed you how to set the return type of a arrow function in TypeScript. You can set the return type after the colon between the bracket and the arrow symbol. I also show you some common cases when you set the return type of an arrow function. Hope it is helpful to you.

Maybe you are interested:

Leave a Reply

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