Fix handling of parenthesis with {Optional}IndexedAccess (#11051)

changelog_unreleased/flow/11051.md

@@ -0,0 +1,27 @@
+#### Fix handling of parenthesis with Flow's {Optional}IndexedAccess (#11051 by @gkz)
+
+Add parens when required.
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+type A = (T & S)['bar'];
+type B = (T | S)['bar'];
+type C = (?T)['bar'];
+type D = (typeof x)['bar'];
+type E = (string => void)['bar'];
+
+// Prettier stable
+type A = T & S["bar"];
+type B = T | S["bar"];
+type C = ?T["bar"];
+type D = typeof x["bar"];
+type E = (string) => void["bar"];
+
+// Prettier main
+type A = (T & S)["bar"];
+type B = (T | S)["bar"];
+type C = (?T)["bar"];
+type D = (typeof x)["bar"];
+type E = ((string) => void)["bar"];
+```

src/language-js/needs-parens.js

@@ -461,11 +461,19 @@ function needsParens(path, options) {
         parent.type === "ArrayTypeAnnotation" ||
         parent.type === "NullableTypeAnnotation" ||
         parent.type === "IntersectionTypeAnnotation" ||
-        parent.type === "UnionTypeAnnotation"
+        parent.type === "UnionTypeAnnotation" ||
+        (name === "objectType" &&
+          (parent.type === "IndexedAccessType" ||
+            parent.type === "OptionalIndexedAccessType"))
       );
 
     case "NullableTypeAnnotation":
-      return parent.type === "ArrayTypeAnnotation";
+      return (
+        parent.type === "ArrayTypeAnnotation" ||
+        (name === "objectType" &&
+          (parent.type === "IndexedAccessType" ||
+            parent.type === "OptionalIndexedAccessType"))
+      );
 
     case "FunctionTypeAnnotation": {
       const ancestor =
@@ -477,6 +485,9 @@ function needsParens(path, options) {
         ancestor.type === "UnionTypeAnnotation" ||
         ancestor.type === "IntersectionTypeAnnotation" ||
         ancestor.type === "ArrayTypeAnnotation" ||
+        (name === "objectType" &&
+          (ancestor.type === "IndexedAccessType" ||
+            ancestor.type === "OptionalIndexedAccessType")) ||
         // 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.
@@ -495,6 +506,13 @@ function needsParens(path, options) {
     case "OptionalIndexedAccessType":
       return name === "objectType" && parent.type === "IndexedAccessType";
 
+    case "TypeofTypeAnnotation":
+      return (
+        name === "objectType" &&
+        (parent.type === "IndexedAccessType" ||
+          parent.type === "OptionalIndexedAccessType")
+      );
+
     case "StringLiteral":
     case "NumericLiteral":
     case "Literal":

tests/format/flow/indexed-access/__snapshots__/jsfmt.spec.js.snap

@@ -9,8 +9,20 @@ trailingComma: "all"
 =====================================input======================================
 const x: Obj['bar'] = 1;
 
+type A = (T & S)['bar'];
+type B = (T | S)['bar'];
+type C = (?T)['bar'];
+type D = (typeof x)['bar'];
+type E = (string => void)['bar'];
+
 =====================================output=====================================
 const x: Obj["bar"] = 1;
 
+type A = (T & S)["bar"];
+type B = (T | S)["bar"];
+type C = (?T)["bar"];
+type D = (typeof x)["bar"];
+type E = ((string) => void)["bar"];
+
 ================================================================================
 `;

tests/format/flow/indexed-access/indexed-access.js

@@ -1 +1,7 @@
 const x: Obj['bar'] = 1;
+
+type A = (T & S)['bar'];
+type B = (T | S)['bar'];
+type C = (?T)['bar'];
+type D = (typeof x)['bar'];
+type E = (string => void)['bar'];

tests/format/flow/optional-indexed-access/__snapshots__/jsfmt.spec.js.snap

@@ -8,21 +8,25 @@ trailingComma: "all"
                                                                                 | printWidth
 =====================================input======================================
 type A = Obj?.['foo'];
-
 type B = Obj?.['foo']['bar'];
-
 type C = Obj['foo']?.['bar'];
-
 type D = (Obj?.['foo'])['bar'];
+type E = (T & S)?.['bar'];
+type F = (T | S)?.['bar'];
+type G = (?T)?.['bar'];
+type H = (typeof x)?.['bar'];
+type I = (string => void)?.['bar'];
 
 =====================================output=====================================
 type A = Obj?.["foo"];
-
 type B = Obj?.["foo"]["bar"];
-
 type C = Obj["foo"]?.["bar"];
-
 type D = (Obj?.["foo"])["bar"];
+type E = (T & S)?.["bar"];
+type F = (T | S)?.["bar"];
+type G = (?T)?.["bar"];
+type H = (typeof x)?.["bar"];
+type I = ((string) => void)?.["bar"];
 
 ================================================================================
 `;

tests/format/flow/optional-indexed-access/optional-indexed-access.js

@@ -1,7 +1,9 @@
 type A = Obj?.['foo'];
-
 type B = Obj?.['foo']['bar'];
-
 type C = Obj['foo']?.['bar'];
-
 type D = (Obj?.['foo'])['bar'];
+type E = (T & S)?.['bar'];
+type F = (T | S)?.['bar'];
+type G = (?T)?.['bar'];
+type H = (typeof x)?.['bar'];
+type I = (string => void)?.['bar'];