Add parentheses to TypeofTypeAnnotation

changelog_unreleased/flow/14458.md

@@ -0,0 +1,13 @@
+#### Add parentheses for `TypeofTypeAnnotation` to improve readability (#14458 by @fisker)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+type A = (typeof node.children)[];
+
+// Prettier stable
+type A = typeof node.children[];
+
+// Prettier main
+type A = (typeof node.children)[];
+```

src/language-js/needs-parens.js

@@ -529,6 +529,14 @@ function needsParens(path, options) {
         (name === "objectType" && parent.type === "TSIndexedAccessType") ||
         (name === "elementType" && parent.type === "TSArrayType")
       );
+    // Same as `TSTypeQuery`, but for Flow syntax
+    case "TypeofTypeAnnotation":
+      return (
+        (name === "objectType" &&
+          (parent.type === "IndexedAccessType" ||
+            parent.type === "OptionalIndexedAccessType")) ||
+        (name === "elementType" && parent.type === "ArrayTypeAnnotation")
+      );
     case "ArrayTypeAnnotation":
       return parent.type === "NullableTypeAnnotation";
 
@@ -583,13 +591,6 @@ 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/typescript/typeof/__snapshots__/jsfmt.spec.js.snap

@@ -2,20 +2,20 @@
 
 exports[`typeof.ts format 1`] = `
 ====================================options=====================================
-parsers: ["typescript"]
+parsers: ["typescript", "flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-a as (typeof node.children)[number]
-a as (typeof node.children)[]
-a as ((typeof node.children)[number])[]
-a as number[(typeof node.children)]
+type A = (typeof node.children)[number];
+type B = (typeof node.children)[];
+type C = ((typeof node.children)[number])[];
+type D = number[(typeof node.children)];
 
 =====================================output=====================================
-a as (typeof node.children)[number];
-a as (typeof node.children)[];
-a as (typeof node.children)[number][];
-a as number[typeof node.children];
+type A = (typeof node.children)[number];
+type B = (typeof node.children)[];
+type C = (typeof node.children)[number][];
+type D = number[typeof node.children];
 
 ================================================================================
 `;

tests/format/typescript/typeof/jsfmt.spec.js

@@ -1 +1 @@
-run_spec(__dirname, ["typescript"]);
+run_spec(__dirname, ["typescript", "flow"]);

tests/format/typescript/typeof/typeof.ts

@@ -1,4 +1,4 @@
-a as (typeof node.children)[number]
-a as (typeof node.children)[]
-a as ((typeof node.children)[number])[]
-a as number[(typeof node.children)]
+type A = (typeof node.children)[number];
+type B = (typeof node.children)[];
+type C = ((typeof node.children)[number])[];
+type D = number[(typeof node.children)];