Set the return type of a arrow function in TypeScript

avatar

Borislav Hadzhiev

Last updated: Apr 16, 2022

banner

Photo from Unsplash

Set the return type of an arrow function in TypeScript #

You can set the return type of an arrow function in TypeScript right after its parameters, e.g. const greet = (name: string): string => {}. Once a function's return type is set, the type checker alerts us if the function returns a value of a different type.

index.ts
// 👇️ with arrow function const greet = (name: string): string => { return `Hello ${name}`; }; console.log(greet('Alice')); // 👉️ "Hello Alice" class Employee { constructor(public name: string) { this.name = name; } // 👇️ with class method greet = (): string => { return `Hello ${this.name}`; }; } const employee = new Employee('Bob'); console.log(employee.greet()); // 👉️ "Hello Bob"

The first example shows how to specify the return type of an arrow function.

The greet function takes a single parameter of type string and returns a value of type string.

Now that we've set the function's return type, the type checker would throw an error if we try to return a value of a different type or forget to return a value from the function.

index.ts
// ⛔️ A function whose declared type is neither // 'void' nor 'any' must return a value.ts(2355) const greet = (name: string): string => { // return `Hello ${name}`; };

The issue in the example above is that the function doesn't return anything, but has a return type of string.

Explicitly typing a function is useful because it allows us to leverage the type checker.

Had we not set the function's return type, TypeScript would try to infer it.

index.ts
// 👇️ const greet: (name: string) => string const greet = (name: string) => { return `Hello ${name}`; };

TypeScript is able to infer the function's return type in this case. However, it wouldn't alert us if we forgot to return a string because we haven't set the function's return type.

index.ts
// 👇️ no errors const greet = (name: string) => { // return `Hello ${name}`; };

If your function definition gets busy, extract the return type into a type alias or an interface.

index.ts
type Person = { name: string; salary: number; department: string; }; const getEmployee = (): Person => { return { name: 'Alice', salary: 100, department: 'development', }; };

Type alises and interfaces are useful when your function's definition gets busy or you have to reuse a type in multiple places.

The syntax is the same when using an implicit arrow function return.

index.ts
type Person = { name: string; salary: number; department: string; }; // 👇️ implicit arrow function return const getEmployee = (): Person => ({ name: 'Alice', salary: 100, department: 'development', });

If your arrow function might return values of different types, use a union type.

index.ts
function getStringOrNumber(): string | number { if (Math.random() > 0.5) { return 100; } return 'hello'; }

The function in the example returns a value of type string or number.

If you define a class method using an arrow function, you can set the arrow function's return type right after its parameters.

index.ts
class Employee { constructor(public name: string) { this.name = name; } // 👇️ string return type greet = (): string => { return `Hello ${this.name}`; }; } const employee = new Employee('Bob'); console.log(employee.greet()); // 👉️ "Hello Bob"

The greet method has a return type of string, so trying to return a value of a different type would cause an error.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.