DEV Community

Cover image for Pipeline Operator great again!
Peter Vivo
Peter Vivo

Posted on

Pipeline Operator great again!

Pipeline Operator |> in TypeScript: An Ambitious Undertaking

Introduction

I've always been captivated by the potential of the pipeline operator. About three years ago, I had the privilege of integrating it into a real-world scientific React application using the first proposal with the Babel compiler. The experience was nothing short of transformative. This operator streamlined our code, enhancing readability and maintainability in a way few other features could.

Given its potential, I am embarking on an ambitious endeavor: creating a proof-of-concept (POC) version of the pipeline operator specifically for TypeScript. By targeting TypeScript directly, I hope to sidestep some of the prolonged discussions and debates that sometimes slow down JavaScript's evolution.

Why TypeScript?

The TypeScript community is known for its innovative spirit and openness to features that augment developer productivity. By introducing the pipeline operator directly into TypeScript, we can gain immediate feedback from this forward-thinking community and potentially demonstrate its utility faster.

The Proposal

While various ideas have been floated around the pipeline operator's implementation, I'm a firm believer in the KISS (Keep It Simple, Stupid) principle. My proposal aims to implement the simplest form: data |> function. I'm intentionally avoiding additional tokens like % to ensure that our implementation remains as straightforward and intuitive as possible.

For those unfamiliar with the various concepts around the pipeline operator, I recommend diving into this comprehensive summary provided by TC39.

the Pipeline operator

The pipeline operator (|>) for JavaScript is a proposal for a new operator that provides a way to streamline chained function calls in a more readable, functional manner. It hasn't been added to the language as of my last training data (up to September 2021), but it has generated a lot of interest in the community.

  1. Basic Idea: The pipeline operator is a way to simplify multiple function calls, especially when one function's output is passed as input to another. It's syntactic sugar for more readable function composition.

    // Without pipeline:
    let result = exclaim(capitalize(doubleSay("hello")));
    
    // With pipeline:
    let result = "hello"
      |> doubleSay
      |> capitalize
      |> exclaim;
    
  2. Syntax: The basic syntax of the pipeline operator is value |> function. The value on the left of the operator is used as the argument for the function on the right.

  3. Proposal Stages: The pipeline operator proposal has gone through various stages of TC39's process. At different points in time, there have been multiple competing proposals for how the pipeline operator should work, including variations like the "minimal proposal", the "F#-style", and the "Smart Mix". The exact behavior and syntax have thus been subjects of discussion and change.

  4. Comparison with Other Languages: The pipeline operator has been inspired by similar constructs in other languages. For instance, Elixir and F# both have a pipeline operator that works similarly.

  5. Use Cases: The pipeline operator is especially handy with data transformation libraries like lodash or Ramda, as well as in scenarios where data needs to be processed in a series of steps.

  6. Current Status: You'd have to check the TC39 proposals repository or the official proposal text for the most recent status. As of my last update, it had not yet reached Stage 4 (final stage) of the TC39 process, which means it wasn't part of the ECMAScript specification yet.

few word about |>

What's Next?

Once the POC is ready, I will actively seek feedback from the TypeScript community, iterate upon the design based on that feedback, and if all goes well, propose its formal inclusion in a future TypeScript release.

Join Me

This journey promises to be challenging but immensely rewarding. I invite all who share this vision to join me in making the pipeline operator a first-class citizen in TypeScript.

Top comments (1)

Collapse
 
pengeszikra profile image
Peter Vivo

After downloading the TypeScript repo, I ran the following ripgrep command:

rg --stats pipe
Enter fullscreen mode Exit fullscreen mode

Image description

Result:

902 matches
762 matched lines
47 files contained matches
Enter fullscreen mode Exit fullscreen mode

So, it seems that piping is used quite frequently, even in TypeScript itself.