How To 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:

• Access an Enum by Index in TypeScript
• Using generics in Arrow functions in TypeScrip
• Get the Type of a Function’s Arguments in TypeScript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm