Support TypeScript 4.1 via Babel

changelog_unreleased/typescript/pr-9473.md

@@ -0,0 +1,40 @@
+#### Support TypeScript 4.1 via Babel (#9473 by @sosukesuzuki)
+
+`--parser=babel-ts` is required.
+
+##### Key Remapping In Mapped Types
+
+```ts
+// Input
+type MappedTypeWithNewKeys<T> = {
+  [K in keyof T as NewKeyType]: T[K]
+};
+
+// Prettier master
+SyntaxError: Unexpected token, expected "]" (2:17)
+  1 | type MappedTypeWithNewKeys<T> = {
+> 2 |   [K in keyof T as NewKeyType]: T[K]
+    |                 ^
+  3 | };
+
+// Prettier stable
+type MappedTypeWithNewKeys<T> = {
+  [K in keyof T as NewKeyType]: T[K]
+};
+```
+
+##### Template Literal Types
+
+```ts
+// Input
+type HelloWorld = `Hello, ${keyof World}`
+
+// Prettier master
+SyntaxError: Unexpected token, expected "}" (1:35)
+> 1 | type HelloWorld = `Hello, ${keyof World}`
+    |                                   ^
+
+// Prettier stable
+type HelloWorld = `Hello, ${keyof World}`;
+
+```

cspell.json

@@ -189,6 +189,7 @@
         "Kassens",
         "Kasturi",
         "Kearney",
+        "keyof",
         "Khatri",
         "l’objectif",
         "lcov",

src/language-js/printer-estree.js

@@ -2943,6 +2943,14 @@ function printPathNoParens(path, options, print, args) {
         if (n.constraint) {
           parts.push(" in ", path.call(print, "constraint"));
         }
+        if (parent.nameType) {
+          parts.push(
+            " as ",
+            path.callParent((path) => {
+              return path.call(print, "nameType");
+            })
+          );
+        }
         parts.push("]");
         return concat(parts);
       }

tests/typescript/key-remapping-in-mapped-types/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`key-remapping.ts format 1`] = `
+====================================options=====================================
+parsers: ["babel-ts", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+type MappedTypeWithNewKeys<T> = {
+  [K in keyof T as NewKeyType]: T[K]
+};
+
+type RemoveKindField<T> = {
+  [K in keyof T as Exclude<K, "kind">]: T[K]
+};
+
+type PickByValueType<T, U> = {
+  [K in keyof T as T[K] extends U ? K : never]: T[K]
+};
+
+=====================================output=====================================
+type MappedTypeWithNewKeys<T> = {
+  [K in keyof T as NewKeyType]: T[K];
+};
+
+type RemoveKindField<T> = {
+  [K in keyof T as Exclude<K, "kind">]: T[K];
+};
+
+type PickByValueType<T, U> = {
+  [K in keyof T as T[K] extends U ? K : never]: T[K];
+};
+
+================================================================================
+`;

tests/typescript/key-remapping-in-mapped-types/jsfmt.spec.js

@@ -0,0 +1,3 @@
+run_spec(__dirname, ["babel-ts", "typescript"], {
+  errors: { typescript: true },
+});

tests/typescript/key-remapping-in-mapped-types/key-remapping.ts

@@ -0,0 +1,11 @@
+type MappedTypeWithNewKeys<T> = {
+  [K in keyof T as NewKeyType]: T[K]
+};
+
+type RemoveKindField<T> = {
+  [K in keyof T as Exclude<K, "kind">]: T[K]
+};
+
+type PickByValueType<T, U> = {
+  [K in keyof T as T[K] extends U ? K : never]: T[K]
+};

tests/typescript/template-literal-types/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`template-literal-types.ts format 1`] = `
+====================================options=====================================
+parsers: ["babel-ts", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+let x: \`foo-\${infer bar}\`;
+type HelloWorld = \`\${Hello}, \${World}\`
+type SeussFish = \`\${Quantity | Color} fish\`;
+declare function setAlignment(value: \`\${VerticalAlignment}-\${HorizontalAlignment}\`): void;
+type PropEventSource<T> = {
+  on(eventName: \`\${string & keyof T}Changed\`, callback: () => void): void;
+};
+type PropEventSource<T> = {
+  on<K extends string & keyof T>
+    (eventName: \`\${K}Changed\`, callback: (newValue: T[K]) => void ): void;
+};
+
+=====================================output=====================================
+let x: \`foo-\${infer bar}\`;
+type HelloWorld = \`\${Hello}, \${World}\`;
+type SeussFish = \`\${Quantity | Color} fish\`;
+declare function setAlignment(
+  value: \`\${VerticalAlignment}-\${HorizontalAlignment}\`
+): void;
+type PropEventSource<T> = {
+  on(eventName: \`\${string & keyof T}Changed\`, callback: () => void): void;
+};
+type PropEventSource<T> = {
+  on<K extends string & keyof T>(
+    eventName: \`\${K}Changed\`,
+    callback: (newValue: T[K]) => void
+  ): void;
+};
+
+================================================================================
+`;

tests/typescript/template-literal-types/jsfmt.spec.js

@@ -0,0 +1,3 @@
+run_spec(__dirname, ["babel-ts", "typescript"], {
+  errors: { typescript: true },
+});

tests/typescript/template-literal-types/template-literal-types.ts

@@ -0,0 +1,11 @@
+let x: `foo-${infer bar}`;
+type HelloWorld = `${Hello}, ${World}`
+type SeussFish = `${Quantity | Color} fish`;
+declare function setAlignment(value: `${VerticalAlignment}-${HorizontalAlignment}`): void;
+type PropEventSource<T> = {
+  on(eventName: `${string & keyof T}Changed`, callback: () => void): void;
+};
+type PropEventSource<T> = {
+  on<K extends string & keyof T>
+    (eventName: `${K}Changed`, callback: (newValue: T[K]) => void ): void;
+};