javascripttypescriptprettier

What's the purpose of a leading pipe when declaring a type on Typescript


Using Prettier I noticed that this code block is formatted to contain an extra leading pipe, see the following example:

// before Prettier
let foo: {
    [k: string]: any
} | boolean;

// after Prettier
const actions:
  | {
      [k: string]: any;
    }
  | boolean = true;

Notice the pipe added by Prettier on the type declaration.

This could also be declared in a single line, and prettier keeps the format without adding the extra pipe:

const actions: { [k: string]: any } | boolean = true;

My doubt is why is this pipe added? Does it change anything at the Typescript level?


Solution

  • It's purely stylistic, there is no functional difference.

    Consider the following:

    type Foo = Bar
      | Baz
      | Bap
    

    compared to this:

    type Foo =
      | Bar
      | Baz
      | Bap
    

    The second example is cleaner, and it's immediately clear that the three things on the right side of the |s are the constituents of the union.

    Clearly, you wouldn't add a leading | when defining everything on one line:

    type Foo = Bar | Baz