Trailing commas for type parameters in TypeScript

[JoshuaKGoldberg]

Prettier 1.9.2

I would paste a playground link but no TypeScript support ;) I'm silly: Playground link

--parser typescript

Input:

type TemplateBinding =
    | AppleTemplateBinding
    | BananaTemplateBinding
    | CarrotTemplateNode
;

type ModelNode =
    | AppleModelNode
    | BananaModelNode
    | CarrotModelNode
;

export const createSourceNodeFromTemplateBinding = <
    TTemplateBinding extends TemplateBinding = TemplateBinding,
    TSourceNode extends SourceNode = SourceNode
>(templateBinding: TTemplateBinding) => {
    /* ... */
};

Expected behavior:

There should be a trailing comma after = SourceNode.

Actual behavior:

As of fa708d1, it will not.

TypeScript 2.7 will be the first version to allow it (microsoft/TypeScript#16152). Should prettier add them back if TS is > 2.7?

[azz]

Prettier rolls in it's own copy of the TypeScript parser, and we don't detect the version of TypeScript at all. Does trailing commas in the case even add any value? It's not like you ever have a large list of type parameters where diffing is a problem?

[JoshuaKGoldberg]

It's not a problem, just a convenience. I would prefer having them for the same reason I'd like to have them in arrays and object literals (though admittedly not with the same level of convenience).

Perhaps this can be revisited if & when the minimum TypeScript version is 2.7...

Edit: Ooh or: --parser typescript@2.7? Would require changing all those options.parser === "typescript" lines to some form of parserIsLanguage(options.parser, "typescript").

[azz]

I don't think such a small thing warrants the maintenance overhead of such a flag.

[j-f1]

We could only add it when you set --trailing-comma all, which assumes you’re using recent versions of stuff.

[duailibe]

Related: #3313 (comment)

[sharno]

This issue causes a failure to compile .tsx (React) files after prettier formatting for this case:

const f = <T, >() => 1

The trailing comma is needed especially for .tsx files for the compiler to recognize that this is a type and not a jsx tag

[lydell]

@sharno Prettier already seems to handle the trailing comma in that case:

❯ prettier --version
1.18.2

❯ cat test.tsx
const f = <T, >() => 1⏎                                                                                  

❯ prettier test.tsx
const f = <T,>() => 1;

[sharno]

@lydell I see, it seems to be a problem in https://github.com/prettier/prettier-vscode