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 });
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.