Fix to add parentheses for TSTypeQuery in some case (#14042)

* add TSTypeQuery to needsParens

* fix to lint prettier

* add test

* remove comment

* add changelog

* fix lint

* remove template comments at top in changelog

* Fix changelog

* Add new line

* check objectType

* remove  fallthrough comment

* check property name

* Simplify changelog

Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/typescript/14042.md

@@ -0,0 +1,19 @@
+#### Add parentheses for TSTypeQuery to improve readability (#14042 by @onishi-kohei)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+a as (typeof node.children)[number]
+a as (typeof node.children)[]
+a as ((typeof node.children)[number])[]
+
+// Prettier stable
+a as typeof node.children[number];
+a as typeof node.children[];
+a as typeof node.children[number][];
+
+// Prettier main
+a as (typeof node.children)[number];
+a as (typeof node.children)[];
+a as (typeof node.children)[number][];
+```

src/language-js/needs-parens.js

@@ -507,7 +507,11 @@ function needsParens(path, options) {
         (parent.type === "TSTypeAnnotation" &&
           path.getParentNode(1).type.startsWith("TSJSDoc"))
       );
-
+    case "TSTypeQuery":
+      return (
+        (name === "objectType" && parent.type === "TSIndexedAccessType") ||
+        (name === "elementType" && parent.type === "TSArrayType")
+      );
     case "ArrayTypeAnnotation":
       return parent.type === "NullableTypeAnnotation";
 

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`typeof.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+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)]
+
+=====================================output=====================================
+a as (typeof node.children)[number];
+a as (typeof node.children)[];
+a as (typeof node.children)[number][];
+a as number[typeof node.children];
+
+================================================================================
+`;

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

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

tests/format/typescript/typeof/typeof.ts

@@ -0,0 +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)]