Repository: prettier/prettier (JavaScript)
Date: 2019-06-03 04:14:46+00:00
Task type: Bug Fix

Issue:
[TypeScript] Trailing commas from type exports removed
**Prettier 1.16.4**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEcAeAHCAnGACGATwzjwBUBXDAGzjONIF48BtAHSjzygoFsAjONgA0eAPRi86AJYxIAEzgcAuiGEgIGGNOgBnZKACG2bBADuABWMJ9KQwDcI0+WpD9shsAGs4MAMoYntJQAObIMNgUcOoAFjC81ADqMbJwuoFgcH42stL2soTI4Lr66sG6QjAWHiG8hsgAZobUFeoAVrpoAEIe3r5+hrxwADLBcI3NrSAdaH7BIbQAihQQ8BMt0SCB2BXYRUQkumDY0lquGCewic4wMcgAHAAM6hcQFYkeGEUXaUL24+psHAAI4UaRA6qGWr1JBNDbqCq8aThSKbXTzJYrNawyabGCGfjXeS3ZAAJnUEUM0mo8wAwhBeHUis1qK4KBUyATbHCKgBfXlAA)
```sh
--parser typescript
--trailing-comma all
```

**Input:**
```tsx
export type TupleType = [
  number, // exitcode
]
```

**Output:**
```tsx
export type TupleType = [
  number // exitcode
];

```

**Expected behavior:**
Keep input as-is

Note that using `babel`, `babel-flow` or `flow` parser keeps the trailing comma


Issue discussion:
Same to me. Every time I run prettier all the types that I've been working results as without commas. Therefore it's an error 
@Ruffeng what do you mean "it's an error" ?

Do you have an example ?

That my TS complains about that
It does not complain in the TypeScript playground: http://www.typescriptlang.org/play/#src=export%20type%20TupleType%20%3D%20%5B%0A%20%20number%20%2F%2F%20exitcode%0A%5D%3B
Try to add a function in the interface and then another. Prettier  will remove it and will show it( at least in my project it does)
@ruffeng Can you give us an example on the TS playground that gives the error you're seeing? 
before TypeScript 3.3 trailing comma on tuple types was not allowed
semantically as far as i know there there is no difference if you put it there or not

https://github.com/Microsoft/TypeScript/pull/28919

there is only one issue here, option: `--trailing-comma all` is not working for tuple types, but i think its better if its not going to (at least until most of people does not upgrade to 3.3)
Yup, having the same issue as @Ruffeng. The issue only came out now because `react-intl-cra` threw the error when it tried to extract a `<FormattedMessage>` from a `.tsx` file.

Solution patch:
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index a5faa7d48b64..974484f7b21c 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -433,6 +433,31 @@ f[(a::b)];
 f[a::b];
 ```
 
+### TypeScript: Add trailing comma on tuple types when `trailing-commma` options is `all` ([#6172] by [@sosukesuzuki])
+
+TypeScript supports a trailing comma on tuple types since version 3.3.
+
+<!-- prettier-ignore -->
+```ts
+// Input
+export type Foo = [
+  number,
+  number, // comment
+];
+
+// Output (Prettier stable)
+export type Foo = [
+  number,
+  number // comment
+];
+
+// Output (Prettier master);
+export type Foo = [
+  number,
+  number, // comment
+];
+```
+
 [#5979]: https://github.com/prettier/prettier/pull/5979
 [#6086]: https://github.com/prettier/prettier/pull/6086
 [#6088]: https://github.com/prettier/prettier/pull/6088
@@ -454,6 +479,7 @@ f[a::b];
 [#6146]: https://github.com/prettier/prettier/pull/6146
 [#6152]: https://github.com/prettier/prettier/pull/6152
 [#6159]: https://github.com/prettier/prettier/pull/6159
+[#6172]: https://github.com/prettier/prettier/pull/6172
 [@belochub]: https://github.com/belochub
 [@brainkim]: https://github.com/brainkim
 [@duailibe]: https://github.com/duailibe
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index b47eebe90985..3bfeb2938f85 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -2487,10 +2487,7 @@ function printPathNoParens(path, options, print, args) {
               printArrayItems(path, options, typesField, print)
             ])
           ),
-          // TypeScript doesn't support trailing commas in tuple types
-          n.type === "TSTupleType"
-            ? ""
-            : ifBreak(shouldPrintComma(options) ? "," : ""),
+          ifBreak(shouldPrintComma(options) ? "," : ""),
           comments.printDanglingComments(path, options, /* sameIndent */ true),
           softline,
           "]"


Test patch:
diff --git a/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap b/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap
index c30e729f5fe0..ea436406d13e 100644
--- a/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/typescript_tuple/__snapshots__/jsfmt.spec.js.snap
@@ -40,6 +40,47 @@ export interface ShopQueryResult {
 ================================================================================
 `;
 
+exports[`trailing-comma.ts 2`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+trailingComma: "all"
+                                                                                | printWidth
+=====================================input======================================
+export interface ShopQueryResult {
+  chic: boolean;
+  location: number[];
+  menus: Menu[];
+  openingDays: number[];
+  closingDays: [
+    {
+      from: string,
+      to: string,
+    }, // <== this one
+  ];
+  shop: string;
+  distance: number;
+}
+
+=====================================output=====================================
+export interface ShopQueryResult {
+  chic: boolean;
+  location: number[];
+  menus: Menu[];
+  openingDays: number[];
+  closingDays: [
+    {
+      from: string;
+      to: string;
+    }, // <== this one
+  ];
+  shop: string;
+  distance: number;
+}
+
+================================================================================
+`;
+
 exports[`tuple.ts 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
@@ -68,3 +109,33 @@ export type SCMRawResource = [
 
 ================================================================================
 `;
+
+exports[`tuple.ts 2`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+trailingComma: "all"
+                                                                                | printWidth
+=====================================input======================================
+
+export type SCMRawResource = [
+	number /*handle*/,
+	string /*resourceUri*/,
+	modes.Command /*command*/,
+	string[] /*icons: light, dark*/,
+	boolean /*strike through*/,
+	boolean /*faded*/
+];
+
+=====================================output=====================================
+export type SCMRawResource = [
+  number /*handle*/,
+  string /*resourceUri*/,
+  modes.Command /*command*/,
+  string[] /*icons: light, dark*/,
+  boolean /*strike through*/,
+  boolean /*faded*/,
+];
+
+================================================================================
+`;
diff --git a/tests/typescript_tuple/jsfmt.spec.js b/tests/typescript_tuple/jsfmt.spec.js
index 2ea3bb6eb2e4..a17d1d35589d 100644
--- a/tests/typescript_tuple/jsfmt.spec.js
+++ b/tests/typescript_tuple/jsfmt.spec.js
@@ -1,1 +1,2 @@
 run_spec(__dirname, ["typescript"]);
+run_spec(__dirname, ["typescript"], { trailingComma: "all" });