TS: missing trailing comma on function splat parameter

[thetrompf]

Prettier 1.9.2
Playground link

--parser typescript
--single-quote
--tab-width 4
--trailing-comma all
--use-tabs

Input:

function fn(a: string, b: number, c: string[], d:number, e: boolean, ...f: string[]): void {
  
}

Output:

function fn(
	a: string,
	b: number,
	c: string[],
	d: number,
	e: boolean,
	...f: string[]
): void {}

Expected behavior:
Added trailing comma after paramter ...f: string[]

[duailibe]

This is intentional. See #3311

EDIT: actually the reasoning is in #3313 (the PR that fixes the issue)

[kastermester]

I have some questions:

• Isn't the actual issue that the TSC compiler with target = esnext is not compatible with babel? Expecting babel to accept the output of TSC with a yet to be defined target seems risky at best?
  Compiling with target set to es2017 doesn't cause any issues in this regard (object splats are compiled away into a helper function).
• The issue is regarding syntax that is kept when transpiling TS to JS - this issue is not. Leaving trailing commas behind in method signatures shouldn't cause any issues.

Also note how the original issue was regarding trailing commas set to es5.

Overall I find it odd wanting to support TypeScript use cases where the target is set to ESNext. One cannot realistically expect TypeScript and Babel to be compatible on yet to be specified standards.

[duailibe]

I'm sorry, that issue doesn't have the context on the decision, it's more on the PR that closes it (such as #3313 (comment)):

Since the three trailing comma cases below are all valid TypeScript and we didn't print trailing commas for two of them, removing the trailing comma in the last case should be fine and more consistent.

EDIT: A trailing comma after a rest argument/property shouldn't matter much since the point of using them is to reduce noise on diffs when adding new ones at the end:

foo(
  arg1,
- arg2
+ arg2,
+ arg3
)

You can't add anything after a rest argument/property so it's not a problem then.

[kastermester]

The problem here is to align with the tslint rules. I don't really care much for whether or not the comma is there to be completely honest.

I have tried getting TypeScript to output the trailing comma (with target set to ESNext) - but it seems impossible for me, have they perhaps changed how their printing is done? With the following function declaration:

function deleteMe(
	param1: any,
	param2: any,
	param3: any,
	param4: any,
	param5: any,
	param6: any,
	param7: any,
	param8: any,
	param9: any,
	param10: any,
	param11: any,
	param12: any,
	param13: any,
	param14: any,
	param15: any,
	param16: any,
	param17: any,
	param18: any,
	param19: any,
	param20: any,
	param21: any,
	param22: any,
	param23: any,
	param23: any,
	...params: any[],
): any {
	return null as any;
}

All the parameters (through tsc) gets printed on the same line, with no trailing comma in the end. Using TypeScript 2.6.2. Like so:

function deleteMe(param1, param2, param3, param4, param5, param6, param7, param8, param9, param10, param11, param12, param13, param14, param15, param16, param17, param18, param19, param20, param21, param22, param23, param23, ...params) {
    return null;
}

[duailibe]

The problem here is to align with the tslint rules. I don't really care much for whether or not the comma is there to be completely honest.

You should probably disable the rule that is conflicting with Prettier in that case.

---

To clarify: we didn't change the trailing comma after rest because of the output of tsc (original issue I linked.. that was probably a bug with tsc or a misconfiguration of the OP) but rather because it was inconsistent with other printing.

I expect the compiler to output that is compatible with ES spec, which means no comma after rest parameter, which is what you're experiencing.

[kastermester]

Sure we can do that.

I guess we disagree with what inconsistency means then :) I find it quite odd that when configured to always print trailing commas, prettier doesn't :)

But we will disable the tslint rule if prettier and tslint does not play nicely in this context.

[duailibe]

Yeah I can see your point and could argue for it. It's kind of difficult to cater to different "syntaxes" (ES, TS, Flow) and then different versions: ES5 and ES6; TS 2.7 supports trailing comma in new places (see #3662).

For now we've decided to be inconsistent with the --trailing-comma all option. We should probably revisit this (maybe in 2.0?).

[kastermester]

Yeah I get it is not easy :) It just seemed that you were pretty set in stone to keep this behaviour.

If there's time to look at it in the future, that sounds great! We will disable the rule for now.

Thanks for taking the time to look at it and explain it - and thanks for a great piece of software :)

[lydell]

We will disable the rule for now.

Or forever. I doubt that rule will ever give you any benefit, even if Prettier changes its trailing comma printing. Just sayin' ;)

[j-f1]

@kastermester You may be interested in tslint-config-prettier a third-party project that disables any and all rules that conflict with Prettier.