TypeScript: How to write an asyncPipe function for asynchronous function composition?

Question

I'm recently exploring TypeScript again. One of it's key limitations seems to be the incapability of typing function composition. Let me first show you the JavaScript code. I'm trying to type this:

const getUserById = id => new Promise((resolve, reject) => id === 1
  ? resolve({ id, displayName: 'Jan' })
  : reject('User not found.')
);
const getName = ({ displayName }) => displayName;
const countLetters = str => str.length;
const asyncIsEven = n => Promise.resolve(n % 2 === 0);

const asyncPipe = (...fns) => x => fns.reduce(async (y, f) => f(await y), x);

const userHasEvenName = asyncPipe(
    getUserById,
    getName,
    countLetters,
    asyncIsEven
);

userHasEvenName(1).then(console.log);
// ↳ false
userHasEvenName(2).catch(console.log);
// ↳ 'User not found.'

Here asyncPipe composes regular functions as well as promises in anti-mathematical order (from left to right). I would love to write an asyncPipe in TypeScript, that knows about the input and output types. So userHasEvenName should know, that it takes in a number and returns a Promise<boolean>. Or, if you comment out getUserById and asyncIsEven it should know that it takes in a User and returns a number.

Here are the helper functions in TypeScript:

interface User {
    id: number;
    displayName: string;
}

const getUserById = (id: number) => new Promise<User>((resolve, reject) => id === 1
    ? resolve({ id, displayName: 'Jan' })
    : reject('User not found.')
);
const getName = ({ displayName }: { displayName: string }) => displayName;
const countLetters = (str: string) => str.length;
const asyncIsEven = (n: number) => Promise.resolve(n % 2 === 0);

I would love to show you all my approaches for asyncPipe but most were way off. I found out that in order to write a compose function in TypeScript, you have to heavily overload it because TypeScript can't handle backwards inference and compose runs in mathematical order. Since asyncPipe composes from left to right, it feels like it's possible to write it. I was able to explicitly write a pipe2 that can compose two regular functions:

function pipe2<A, B, C>(f: (arg: A) => B, g: (arg: B) => C): (arg: A) => C {
    return x => g(f(x));
}

How would you write asyncPipe that asynchronously composes an arbitrary amount of function or promises and correctly infers the return type?

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

Variant 1: Simple `asyncPipe` (playground):

type MaybePromise<T> = Promise<T> | T

function asyncPipe<A, B>(ab: (a: A) => MaybePromise<B>): (a: MaybePromise<A>) => Promise<B>
function asyncPipe<A, B, C>(ab: (a: A) => MaybePromise<B>, bc: (b: B) => MaybePromise<C>): (a: MaybePromise<A>) => Promise<C>
// extend to a reasonable amount of arguments

function asyncPipe(...fns: Function[]) {
    return (x: any) => fns.reduce(async (y, fn) => fn(await y), x)
}

Example:

const userHasEvenName = asyncPipe(getUserById, getName, countLetters, asyncIsEven);
// returns (a: MaybePromise<number>) => Promise<boolean>

Caveat: That will always return a promise, even if all function arguments are sync.

Variant 2: Hybrid `asyncPipe` (playground)

Let's try to make the result a Promise, if any of the functions are async, otherwise return the sync result. Types get bloated really quickly here, so I just used a version with one overload (two function arguments).

function asyncPipe<A, B, C>(ab: (a: A) => B, bc: (b: Sync<B>) => C): < D extends A | Promise<A>>(a: D) => RelayPromise<B, C, D, C>
// extend to a reasonable amount of arguments

function asyncPipe(...fns: Function[]) {
    return (x: any) => fns.reduce((y, fn) => {
        return y instanceof Promise ? y.then(yr => fn(yr)) : fn(y)
    }, x)
}

I defined two helpers: Sync will always get you the resolved Promise type, RelayPromise will transform the last type parameter to a promise, if any of the other parameters is a promise (see playground for more infos).

Example:

const t2 = asyncPipe(getName, countLetters)(Promise.resolve({ displayName: "kldjaf" }))
// t2: Promise<number>

const t3 = asyncPipe(getName, countLetters)({ displayName: "kldjaf" })
// t3: number

Caveat: If you want both sync + async in one type, it will get very complex and you should test it extensively (there may be still some 🐛 in my sample, I only used the simple version so far).

Also there is probably a compatibility reason, why fp-ts uses a special version of pipe, that makes better ussage of TypeScript's left to right type parameter inference (that could be a consideration for you as well).

Notes

Lastly, you should decide, if it's worth to have a special asyncPipe version just for Promises - more types and implementations means more potential bugs.

As an alternative, use the simple pipe with functors or monads in the functional programming style. E.g. instead of using a promise, you can switch to a Task or TaskEither types (see fp-ts as an example).

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 9, 2020 at 13:35

ford04

75.9k26 gold badges220 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user5536315 Over a year ago

In both examples you use (x: any) and Function[], which both constitute blanks in the resulting types. I don't know Typescript much, but this seems to be hacking on the type level.

ford04 Over a year ago

From the caller perspective, only the function overload signatures count - and these will be strong types. If the function body implementation is not complex like in this case, (x: any) and Function[] don't really matter much. Of course, you could try to type the body as well, but more often than not it over complicates things without much return.

user5536315 Over a year ago

Sounds kind of reasonable. I tried to comprehend the calling site aspect by applying asyncPipe(sqrP, sqrP, toUCP) where sqrP = (x: number): Promise<number> => Promise.resolve(x * x) and toUCP = (x: string): Promise<string> => Promise.resolve(x.toUpperCase()). A type error was raised, however, due to wrong number of arguments for asyncPipe rather than invalid function types. The overloaded n-ary case doesn't seem to work.

user5536315 Over a year ago

Ah, the type is arity aware. Thanks, +1. Anyway, I think the underlying problem is that with generics you cannot type the function array other than Array<(_: A) => A>.

J. Hesters Over a year ago

@ford04 Wow, thank you so much. The links in your answer were also incredibly helpful. Could you recommend more resources for functional programming in TS?

|

nestarz · Accepted Answer · 2022-06-06 12:41:17Z

0

An async version with n-ary support:

class Nary extends Array {}
const pipe = (...fns: Function[]) => (...x: any[]) => fns.reduce((y, fn) => y instanceof Promise ? y.then(fn) : y instanceof Nary ? fn(...y) : fn(y), x.length > 1 ? Nary.from(x) : x[0])

answered Jun 6, 2022 at 12:41

nestarz

1192 silver badges10 bronze badges

Comments

Adam Moszczyński · Accepted Answer · 2024-03-25 13:04:35Z

Firstly I had to improve the logic little bit since it did not concatenated results so I could use all the data in all functions without worrying about sequence.

type MaybePromise<T> = Promise<T> | T;
export function asyncPipe<TParameter extends Record<string, unknown>>(
  ...fns: ((p: Partial<TParameter>) => MaybePromise<Partial<TParameter>>)[]
) {
  return (x: MaybePromise<Partial<TParameter>>) => {
    let result = { ...x } as Partial<TParameter>;
    return fns.reduce(async (y, f) => {
      const nextParam = await y;
      result = { ...result, ...nextParam };
      return f(result);
    }, x);
  };
}

Use it then like this:

 it('should invoke all funcs', async () => {
    type Data = Partial<{ test: string; f1Result: number; f2Result: string }>;
    type Handler = (input: Data) => Promise<Data> | Data;
    const f1: Handler = (input) =>
      new Promise((resolve) => {
        resolve({ f1Result: 12 });
      });

    const f2: Handler = (input) =>
      new Promise((resolve) => {
        resolve({ f2Result: `${input.test} ${input.f1Result}` });
      });

    const sut = asyncPipe(f1, f2);

    const result = await sut({ test: 'asd' });

    expect(result.f2Result).toBe('asd 12');
  });

Collectives™ on Stack Overflow

TypeScript: How to write an asyncPipe function for asynchronous function composition?

3 Answers 3

Variant 1: Simple `asyncPipe` (playground):

Variant 2: Hybrid `asyncPipe` (playground)

Notes

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Variant 1: Simple asyncPipe (playground):

Variant 2: Hybrid asyncPipe (playground)

Notes

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Variant 1: Simple `asyncPipe` (playground):

Variant 2: Hybrid `asyncPipe` (playground)