Async Arrow Function

An asynchronous arrow function in TypeScript is a lexically bound, anonymous function expression declared with the async modifier. It evaluates asynchronously via the event loop, permits the use of the await keyword within its body, and strictly requires its return type to be a Promise<T>. The JavaScript engine automatically wraps the raw returned value in a Promise under the hood, meaning the developer does not need to manually wrap the returned value.

Syntax and Type Annotations

TypeScript enforces type safety on async arrow functions through parameter type annotations and explicit Promise return types.

const someAsyncOperation = (text: string): Promise<number> => Promise.resolve(text.length);

const asyncArrowFunction = async (param1: string, param2: number): Promise<number> => {
    const result = await someAsyncOperation(param1);
    return result + param2;
};

If the explicit return type is omitted, TypeScript’s compiler will infer the return type as Promise<T>, where T is the type of the returned value. If the function does not return a value, the inferred type is Promise<void>.

// Inferred as (id: number) => Promise<string>
const fetchName = async (id: number) => {
    return "System"; 
};

const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));

// Explicitly typed as Promise<void>
const executeTask = async (): Promise<void> => {
    await delay(1000);
};

Typing the Function Signature

Instead of inline annotations, the entire function signature can be defined using a type alias or an interface. The async keyword is an implementation detail and is omitted from the signature definition; the asynchronous nature is dictated entirely by the Promise return type.

type AsyncProcessor = (payload: string) => Promise<boolean>;

const validate = (data: string): Promise<boolean> => Promise.resolve(data === "valid");

const processPayload: AsyncProcessor = async (payload) => {
    const isValid = await validate(payload);
    return isValid;
};

Generic Async Arrow Functions

Async arrow functions fully support TypeScript generics. The generic type parameter <T> is declared immediately preceding the parameter list.

const parseData = async <T>(jsonString: string): Promise<T> => {
    const parsed = JSON.parse(jsonString);
    return parsed as T;
};

TSX/JSX Compiler Quirk

When writing generic async arrow functions in .tsx files, the TypeScript compiler can misinterpret the generic syntax <T> as an opening JSX tag. To resolve this parsing ambiguity, append a trailing comma to the generic type parameter or use an extends constraint.

// Syntax 1: Trailing comma
const parseDataTsx = async <T,>(data: string): Promise<T> => {
    return JSON.parse(data) as T;
};

// Syntax 2: Extends constraint
const parseDataConstrained = async <T extends unknown>(data: string): Promise<T> => {
    return JSON.parse(data) as T;
};

Implicit Returns

When utilizing implicit returns (omitting the curly braces {}), the async modifier still dictates that the evaluated expression is implicitly wrapped in a resolved Promise.

// Returns Promise<number>
const getTimestamp = async (): Promise<number> => Date.now();

Master TypeScript with Deep Grasping Methodology!

Learn More