Support conditional type and infer type in Flow

changelog_unreleased/flow/14573.md

@@ -0,0 +1,19 @@
+#### Support conditional type and infer type (#14573 by @SamChou19815)
+
+<!-- Optional description if it makes sense. -->
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+type TestReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;
+
+// Prettier stable
+// Does not parse
+
+// Prettier main
+type TestReturnType<T extends (...args: any[]) => any> = T extends (
+  ...args: any[]
+) => infer R
+  ? R
+  : any;
+```

package.json

@@ -62,7 +62,7 @@
     "file-entry-cache": "6.0.1",
     "find-cache-dir": "4.0.0",
     "find-parent-dir": "0.3.1",
-    "flow-parser": "0.202.0",
+    "flow-parser": "0.202.1",
     "get-stdin": "9.0.0",
     "graphql": "16.6.0",
     "hermes-eslint": "0.10.0",

src/language-js/needs-parens.js

@@ -559,7 +559,7 @@ function needsParens(path, options) {
           (parent.type === "IndexedAccessType" ||
             parent.type === "OptionalIndexedAccessType"))
       );
-
+    case "InferTypeAnnotation":
     case "NullableTypeAnnotation":
       return (
         parent.type === "ArrayTypeAnnotation" ||
@@ -591,6 +591,9 @@ function needsParens(path, options) {
         (key === "objectType" &&
           (ancestor.type === "IndexedAccessType" ||
             ancestor.type === "OptionalIndexedAccessType")) ||
+        (key === "checkType" && parent.type === "ConditionalTypeAnnotation") ||
+        (node.returnType.type === "InferTypeAnnotation" &&
+          node.returnType.typeParameter.bound) ||
         // We should check ancestor's parent to know whether the parentheses
         // are really needed, but since ??T doesn't make sense this check
         // will almost never be true.
@@ -604,6 +607,20 @@ function needsParens(path, options) {
       );
     }
 
+    case "ConditionalTypeAnnotation":
+      if (
+        key === "extendsType" &&
+        parent.type === "ConditionalTypeAnnotation" &&
+        node.type === "ConditionalTypeAnnotation"
+      ) {
+        return true;
+      }
+
+      if (key === "checkType" && parent.type === "ConditionalTypeAnnotation") {
+        return true;
+      }
+
+    // fallthrough
     case "OptionalIndexedAccessType":
       return key === "objectType" && parent.type === "IndexedAccessType";
 

src/language-js/print/flow.js

@@ -16,6 +16,7 @@ import {
   printOpaqueType,
   printTypeAlias,
   printIntersectionType,
+  printInferType,
   printUnionType,
   printFunctionType,
   printIndexedAccessType,
@@ -43,6 +44,7 @@ import {
   printRestSpread,
   printDeclareToken,
 } from "./misc.js";
+import { printTernary } from "./ternary.js";
 
 function printFlow(path, options, print) {
   const { node } = path;
@@ -98,6 +100,10 @@ function printFlow(path, options, print) {
       return printIntersectionType(path, options, print);
     case "UnionTypeAnnotation":
       return printUnionType(path, options, print);
+    case "ConditionalTypeAnnotation":
+      return printTernary(path, options, print);
+    case "InferTypeAnnotation":
+      return printInferType(path, options, print);
     case "FunctionTypeAnnotation":
       return printFunctionType(path, options, print);
     case "TupleTypeAnnotation":

src/language-js/print/ternary.js

@@ -182,8 +182,8 @@ function shouldExtraIndentForConditionalExpression(path) {
 
 /**
  * The following is the shared logic for
- * ternary operators, namely ConditionalExpression
- * and TSConditionalType
+ * ternary operators, namely ConditionalExpression,
+ * ConditionalTypeAnnotation and TSConditionalType
  * @param {AstPath} path - The path to the ConditionalExpression/TSConditionalType node.
  * @param {Options} options - Prettier options
  * @param {Function} print - Print function to call recursively

src/language-js/print/type-annotation.js

@@ -324,6 +324,14 @@ function printIndexedAccessType(path, options, print) {
   ];
 }
 
+/*
+- `TSInferType`(TypeScript)
+- `InferTypeAnnotation`(flow)
+*/
+function printInferType(path, options, print) {
+  return ["infer", " ", print("typeParameter")];
+}
+
 // `TSJSDocNullableType`, `TSJSDocNonNullableType`
 function printJSDocType(path, print, token) {
   const { node } = path;
@@ -504,6 +512,7 @@ export {
   printUnionType,
   printFunctionType,
   printIndexedAccessType,
+  printInferType,
   shouldHugType,
   printJSDocType,
   printRestType,

src/language-js/print/type-parameters.js

@@ -152,7 +152,11 @@ function printTypeParameter(path, options, print) {
   parts.push(name);
 
   if (node.bound) {
-    parts.push(printTypeAnnotationProperty(path, print, "bound"));
+    if (node.usesExtendsBound) {
+      parts.push(" extends ", print(["bound", "typeAnnotation"]));
+    } else {
+      parts.push(printTypeAnnotationProperty(path, print, "bound"));
+    }
   }
 
   if (node.constraint) {

src/language-js/print/typescript.js

@@ -47,6 +47,7 @@ import {
   printUnionType,
   printFunctionType,
   printIndexedAccessType,
+  printInferType,
   printJSDocType,
   printRestType,
   printNamedTupleMember,
@@ -372,7 +373,7 @@ function printTypescript(path, options, print) {
       return printTernary(path, options, print);
 
     case "TSInferType":
-      return ["infer ", print("typeParameter")];
+      return printInferType(path, options, print);
     case "TSIntersectionType":
       return printIntersectionType(path, options, print);
     case "TSUnionType":

src/language-js/traverse/visitor-keys.evaluate.js

@@ -34,7 +34,14 @@ const additionalVisitorKeys = {
   QualifiedTypeofIdentifier: ["id", "qualification"],
   ClassProperty: ["variance"],
   ClassPrivateProperty: ["variance"],
+  ConditionalTypeAnnotation: [
+    "checkType",
+    "extendsType",
+    "trueType",
+    "falseType",
+  ],
   DeclareEnum: flowVisitorKeys.EnumDeclaration,
+  InferTypeAnnotation: ["typeParameter"],
   TupleTypeAnnotation: ["elementTypes"],
   TupleTypeSpreadElement: ["label", "typeAnnotation"],
   TupleTypeLabeledElement: ["label", "elementType", "variance"],

tests/format/flow/conditional-types-comments/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`comments.js [babel-flow] format 1`] = `
+"Unexpected token (3:12)
+  1 | // @flow
+  2 |
+> 3 | type A = B extends T
+    |            ^
+  4 |   ? // comment
+  5 |     foo
+  6 |   : bar;"
+`;
+
+exports[`comments.js format 1`] = `
+====================================options=====================================
+parsers: ["flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// @flow
+
+type A = B extends T
+  ? // comment
+    foo
+  : bar;
+
+type A = B extends test /* comment
+  comment
+      comment
+*/
+  ? foo
+  : bar;
+
+type T = test extends B
+  ? /* comment
+          comment
+    comment
+          comment
+  */
+    foo
+  : bar;
+
+type T = test extends B
+  ? /* comment
+       comment
+       comment
+       comment
+    */
+    foo
+  : test extends B
+  ? /* comment
+  comment
+    comment */
+    foo
+  : bar;
+
+type T = test extends B
+  ? /* comment */
+    foo
+  : bar;
+
+type T = test extends B
+  ? foo
+  : /* comment
+         comment
+     comment
+           comment
+    */
+  bar;
+
+type T = test extends B
+  ? foo
+  : /* comment
+         comment
+     comment
+           comment
+    */
+  test extends B
+  ? foo
+  : /* comment
+  comment
+    comment
+   */
+    bar;
+
+type T = test extends B
+  ? foo
+  : /* comment */
+  bar;
+
+type T = test extends B ? test extends B /* c
+c */? foo : bar : bar;
+
+=====================================output=====================================
+// @flow
+
+type A = B extends T // comment
+  ? foo
+  : bar;
+
+type A = B extends test /* comment
+  comment
+      comment
+*/
+  ? foo
+  : bar;
+
+type T = test extends B /* comment
+          comment
+    comment
+          comment
+  */
+  ? foo
+  : bar;
+
+type T = test extends B /* comment
+       comment
+       comment
+       comment
+    */
+  ? foo
+  : test extends B /* comment
+  comment
+    comment */
+  ? foo
+  : bar;
+
+type T = test extends B /* comment */ ? foo : bar;
+
+type T = test extends B
+  ? foo /* comment
+         comment
+     comment
+           comment
+    */
+  : bar;
+
+type T = test extends B
+  ? foo /* comment
+         comment
+     comment
+           comment
+    */
+  : test extends B
+  ? foo /* comment
+  comment
+    comment
+   */
+  : bar;
+
+type T = test extends B ? foo /* comment */ : bar;
+
+type T = test extends B
+  ? test extends B /* c
+c */
+    ? foo
+    : bar
+  : bar;
+
+================================================================================
+`;