Repository: prettier/prettier (JavaScript)
Date: 2022-05-27 08:36:59+00:00
Task type: Bug Fix

Issue:
Syntax error after formatting when using computed key in TypeScript enum
**Prettier 2.6.2**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuECCuBbABAQS8AHSiywG0BLAakoF0iBfEAGhAgAcZzoBnZUAQwBOgiAHcACkIS8U-ADaj+AT14sARoP5gA1nBgBlfhjgAZclDjIAZvO5x1mnXv1st5gObIYgtPdQY1OAATIOCTfih3NH53OAAxCEEMfhhOSOQQfjQYCGYQAAsYDDkAdXzyeG5XMDh9aQryADcKpQywblUQcztBGHFNd2TrWz8AK24AD30POTgARTQIeGG5OxZXQR6MmCU2OG4wQXIOPLYj2BLyIJh85AAOAAZ1kTsSzTYMs-24QUbLFgAjot4P12DJMtwALQWYLBPKCOBA8gI-oxIZIGyrPx2DDkLw+bEzebAywYkYsGD8NSXa63JAAJgpmnIcg8AGEIBh0ahuABWPJoOwAFSpMkxaxAjV8AEkoKFYPpDscYDg5fodrMVnZ6PQgA)
<!-- prettier-ignore -->
```sh
--parser typescript
```

**Input 1:**
<!-- prettier-ignore -->
```tsx
enum A {
  [i++]
}
```

**Output 1:**
<!-- prettier-ignore -->
```tsx
enum A {
  i++,
}

```
**Input 2:**
<!-- prettier-ignore -->
```tsx
const a = "b"
enum A {
  [a] = 2
}
```

**Output 2:**
<!-- prettier-ignore -->
```tsx
const a = "b";
enum A {
  a = 2,
}

```

**Expected behavior:**
The output should be valid syntax. Although TypeScript will error during compiling that computed keys are not allowed in enums, they are valid syntax and parse correctly. Prettier should still support formatting this. Note that TypeScript still produces emit even when erroring, meaning the code would be able to run.

**Actual behavior:**
The output incorrectly removes the brackets, producing a syntax error on example 1, or modifying the runtime behaviour in example 2.




Issue discussion:

Solution patch:
diff --git a/changelog_unreleased/typescript/12930.md b/changelog_unreleased/typescript/12930.md
new file mode 100644
index 000000000000..9c6fde5af05a
--- /dev/null
+++ b/changelog_unreleased/typescript/12930.md
@@ -0,0 +1,19 @@
+#### fix formatting for typescript Enum with computed members (#12930 by @HosokawaR)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+enum A {
+  [i++],
+}
+
+// Prettier stable
+enum A {
+  i++,
+}
+
+// Prettier main
+enum A {
+  [i++],
+}
+```
diff --git a/src/language-js/print/typescript.js b/src/language-js/print/typescript.js
index 1a1dad4d2405..ea28ac483945 100644
--- a/src/language-js/print/typescript.js
+++ b/src/language-js/print/typescript.js
@@ -413,7 +413,12 @@ function printTypescript(path, options, print) {
 
       return parts;
     case "TSEnumMember":
-      parts.push(print("id"));
+      if (node.computed) {
+        parts.push("[", print("id"), "]");
+      } else {
+        parts.push(print("id"));
+      }
+
       if (node.initializer) {
         parts.push(" = ", print("initializer"));
       }


Test patch:
diff --git a/tests/format/typescript/enum/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/enum/__snapshots__/jsfmt.spec.js.snap
index 82de64f80d39..0a37faedb892 100644
--- a/tests/format/typescript/enum/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/typescript/enum/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`computed-members.ts [babel-ts] format 1`] = `
+"Unexpected token (2:3)
+  1 | enum A {
+> 2 |   [i++],
+    |   ^
+  3 | }
+  4 |
+  5 | const bar = "bar""
+`;
+
+exports[`computed-members.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+enum A {
+  [i++],
+}
+
+const bar = "bar"
+enum B {
+  [bar] = 2,
+}
+
+const foo = () => "foo";
+enum C {
+  [foo()] = 2,
+}
+
+=====================================output=====================================
+enum A {
+  [i++],
+}
+
+const bar = "bar";
+enum B {
+  [bar] = 2,
+}
+
+const foo = () => "foo";
+enum C {
+  [foo()] = 2,
+}
+
+================================================================================
+`;
+
 exports[`enum.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
diff --git a/tests/format/typescript/enum/computed-members.ts b/tests/format/typescript/enum/computed-members.ts
new file mode 100644
index 000000000000..9f1fed42d5d4
--- /dev/null
+++ b/tests/format/typescript/enum/computed-members.ts
@@ -0,0 +1,13 @@
+enum A {
+  [i++],
+}
+
+const bar = "bar"
+enum B {
+  [bar] = 2,
+}
+
+const foo = () => "foo";
+enum C {
+  [foo()] = 2,
+}
diff --git a/tests/format/typescript/enum/jsfmt.spec.js b/tests/format/typescript/enum/jsfmt.spec.js
index 2ea3bb6eb2e4..808fc6828fe8 100644
--- a/tests/format/typescript/enum/jsfmt.spec.js
+++ b/tests/format/typescript/enum/jsfmt.spec.js
@@ -1,1 +1,5 @@
-run_spec(__dirname, ["typescript"]);
+run_spec(__dirname, ["typescript"], {
+  errors: {
+    "babel-ts": ["computed-members.ts"],
+  },
+});