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?

Answer 1

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).