← back

Implementing the Pipe Operator in TypeScript

What is the pipe operator?

The pipe operator is used to chain function calls together in a more readable and concise way. The operator takes the output of one function as the input for the next function in the chain. Here’s an example of pipes in Elixir.

"hello"
|> String.upcase() # turn string into uppercase
|> String.reverse() # reverse the string returned from `String.upcase()`
|> IO.puts() # print the output from `String.reverse()`

# "OLLEH"

In the example above, the pipe operator |> takes the output of the previous function and passes it as the input for the next function. Here’s a more complex example. It’s my solution to Advent of Code 2022 day 1 pt.2.

File.read!("./input.txt")
|> String.split("\n\n")
|> Enum.map(fn elf ->
  elf
  |> String.split("\n")
  |> Enum.map(fn e -> e |> String.to_integer() end)
  |> Enum.sum()
end)
|> Enum.sort(:desc)
|> Enum.slice(0..2)
|> Enum.sum()
|> IO.inspect()

You can see how the pipe operator really helps in improving the readability of the code. The code reads like a sentence. Pipes also eliminate the need to create temporary variables to store the output of each function call or using nested function calls. As a result developers also don’t have to worry about naming variables which is my least liked part of programming.

Implementing the pipe operator in TypeScript

After watching Theo’s video on the proposal for adding pipes in JavaScript, I was inspired to implement the pipe operator as a function that composes functions together. Here is what I set out to achieve.

const len = (s: string): number => s.length;
const double = (n: number): number => n * 2;
const square = (n: number): number => n ** 2;

console.log(pipe("hi", len, double, square)); // 16

Initial implementation

This was my first iteration of the pipe function.

const pipe = (value: any, ...fns: Function[]) =>
  fns.reduce((acc, fn) => fn(acc), value);

Here’s what this code is doing:

And this works!

First iteration of pipe function works!

Problems with the initial implementation

There are a few problems with this implementation. The first problem that I immediately noticed is that the type of the returned value from the function is any.

Type of returned value is any

Obviously this is not good. Ideally this type should be inferred by the TypeScript compiler. I got some help from Reddit and a user there suggested this:

type Fn = (...args: any[]) => any;

type LastReturnType<L extends Fn[]> = L extends [...any, infer Last extends Fn]
  ? ReturnType<Last>
  : never;

const pipe = <Funcs extends Fn[]>(value: any, ...fns: Funcs) =>
  fns.reduce((acc, fn) => fn(acc), value) as LastReturnType<Funcs>;

This is definitely some crazy TypeScript. Let’s break it down.

So now the type of the returned value is inferred correctly.

Type of returned value is inferred correctly

But there’s still a problem. Let me demonstrate it with an example.

// does not show an error
const result = pipe("hi", double, len, square);

// Argument of type 'number' is not assignable to parameter of type 'string'.
const result2 = square(len(double("hi")));

Here we’re trying to double the string “hi”, which is impossible as we’re passing a string to a function that expects a number. You can see we get the appropriate error when we try to do this by nesting the function calls. But our pipe function does not show any errors.

No error when passing a string to a function that expects a number

This is a perfect use case for Higher Kinded Types. Unfortunately, TypeScript does not support Higher Kinded Types yet. There isn’t a way to say “for all these functions, the input type is contravariant to the output type of the previous function”.

So what’s the solution?

Turns out, the easiest and most straightforward solution is to set an upper bound on the number of functions that can be passed to the pipe function and use function overloading to define the type of the returned value.

function pipe<A>(value: A): A;
function pipe<A, B>(value: A, fn1: (input: A) => B): B;
function pipe<A, B, C>(value: A, fn1: (input: A) => B, fn2: (input: B) => C): C;
function pipe<A, B, C, D>(
  value: A,
  fn1: (input: A) => B,
  fn2: (input: B) => C,
  fn3: (input: C) => D
): D;
function pipe<A, B, C, D, E>(
  value: A,
  fn1: (input: A) => B,
  fn2: (input: B) => C,
  fn3: (input: C) => D,
  fn4: (input: D) => E
): E;
// ... and so on

function pipe(value: any, ...fns: Function[]): unknown {
  return fns.reduce((acc, fn) => fn(acc), value);
}

This might seem very manual but it’s definitely the best way to do this. It works very well and also gives fairly easy to understand type errors for the user. Let’s see how it works.

The first five function declarations are overloads of the pipe function, each one of them has a different set of parameters, each overload corresponds to a different number of functions that can be passed to the pipe function.

Each overload corresponds to a different number of functions, and each function’s input type is the output of the previous function, this way the pipe function will not only return the output type of the last function passed but also type check the input and output types of each function in the pipeline.

The last function declaration is the actual implementation of the pipe function. It takes an initial value of any type and an arbitrary number of functions and applies them to the initial value in the order they are passed. The logic is the same as before.

The advantage of this implementation is that it allows the pipe function to be more type-safe as it ensures that the input and output types of each function in the pipeline are consistent and match the type of the initial value, and it also ensures that the functions passed to the pipe function have the correct signature.

Types working correctly

Overloading without using the function keyword

I love my arrow functions and almost never use the fuction keyword. Unfortunately, we can’t use arrow functions for overloading. We can only use the function keyword for overloading. But what we can do is implement the overloads in an interface and then implement the actual function as a function of that interface.

interface Pipe {
  <A>(value: A): A;
  <A, B>(value: A, fn1: (input: A) => B): B;
  <A, B, C>(value: A, fn1: (input: A) => B, fn2: (input: B) => C): C;
  <A, B, C, D>(
    value: A,
    fn1: (input: A) => B,
    fn2: (input: B) => C,
    fn3: (input: C) => D
  ): D;
  <A, B, C, D, E>(
    value: A,
    fn1: (input: A) => B,
    fn2: (input: B) => C,
    fn3: (input: C) => D,
    fn4: (input: D) => E
  ): E;
  // ... and so on
}

const pipe: Pipe = (value: any, ...fns: Function[]): unknown => {
  return fns.reduce((acc, fn) => fn(acc), value);
};

This is same as the previous implementation, but we’re using an interface to implement the overloads instead of using the function keyword. This way we can use arrow functions for the actual implementation. Pretty neat, right? Everything still works!

Everything still works!

Conclusion

I hope you enjoyed this article. I’ve learned a lot while writing it, and I hope you did too. Thanks for reading!

References