How to Specify Arrow Function Return Type With TypeScript?

You can add a return type to an arrow function, when using TypeScript, in the following ways:

• Defining Return Type Inline on the Function Expression;
• Defining Return Type in Function Type Signature;
• Defining Return Type in a Call Signature.

Defining Return Type Inline on the Function Expression

You can add a return type to an arrow function after the function arguments, separated by a colon (:). It has the following syntax:

(arg1: type, ..., argN: type): returnType => expression

For example:

const getProduct = (name: string): { id: number; name: string; } => ({ id: 123, name: 'foo' });

You can also use a type already defined in an interface or as a type to specify the return type:

interface Product {
    id: number;
    name: string;
}

const getProduct = (name: string): Product => ({ id: 123, name: 'foo' });

Defining Return Type in Function Type Signature

You can use TypeScript function type expressions to describe a function (i.e. its arguments and return types). It has the following syntax:

(arg1: type, ..., argN: type) => returnType

Although the syntax is similar to the JavaScript arrow functions, bear in mind that it is not an arrow function, nor does it apply solely to arrow functions. You can use function type expressions to describe types for function declarations as well as function expressions.

For example:

type GetProduct = (name: string) => { id: number; name: string };

const getProduct: GetProduct = (name) => ({ id: 123, name });

As you can see the type is separated by an arrow; this can't be omitted:

// Error: '=>' expected.
type GetProduct = (name: string);

const getProduct: GetProduct = (name) => ({ id: 123, name });

You can also use this syntax as a value to a property defined in an interface:

interface GetProduct {
    // ...
    fn: (name: string) => { id: number; name: string };
    // ...
}

const getProduct: GetProduct['fn'] = (name) => ({ id: 123, name });

You may also write the whole function type inline, for example, like so:

const getProduct: (name: string) => { id: number; name: string } = (name) => ({ id: 123, name });

However, to promote readability, and avoid confusion, it might be best to not inline the function type expression.

Defining Return Type in a Call Signature

Call signature has the following syntax:

(arg1: type, ..., argN: type): returnType

The syntax looks similar to a method signature, but it doesn't have a name. It can be described using a type or an interface:

type Name = {
    (arg1: type, ..., argN: type): returnType;
}

interface Name {
    (arg1: type, ..., argN: type): returnType;
}

Note that the syntax is slightly different compared to a function type expression (which uses => to separate return type, in contrast to : used in the call signature syntax).

The call signature syntax allows you to define additional properties that might be available on the callable (something which is not possible with function type expressions).

For example:

interface GetProduct {
    // ...
    (name: string): { id: number; name: string };
    // ...
}

const getProduct: GetProduct = (name) => ({ id: 123, name });

You can also write a call signature as a type object:

type GetProduct = {
    // ...
    (name: string): { id: number; name: string };
    // ...
};

const getProduct: GetProduct = (name) => ({ id: 123, name });