TypeScript: Keep type parameters inline for a variable declaration (#6467)

* Modify to keep inline type parameter with variable declaration

* Update CHENGELOG.unreleased.md

* Add tests

* Add tests

* Add pr number and link

CHANGELOG.unreleased.md

@@ -663,6 +663,22 @@ switch (
 }
 ```
 
+#### TypeScript: Keep type parameters inline for a type annotation of variable declaration ([#6467] by [@sosukesuzuki])
+
+<!-- prettier-ignore -->
+```ts
+// Input
+const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
+
+// Prettier (stable)
+const fooooooooooooooo: SomeThing<
+  boolean
+> = looooooooooooooooooooooooooooooongNameFunc();
+
+// Prettier (master)
+const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
+```
+
 [#5910]: https://github.com/prettier/prettier/pull/5910
 [#6186]: https://github.com/prettier/prettier/pull/6186
 [#6206]: https://github.com/prettier/prettier/pull/6206
@@ -686,6 +702,7 @@ switch (
 [#6446]: https://github.com/prettier/prettier/pull/6446
 [#6506]: https://github.com/prettier/prettier/pull/6506
 [#6514]: https://github.com/prettier/prettier/pull/6514
+[#6467]: https://github.com/prettier/prettier/pull/6467
 [@duailibe]: https://github.com/duailibe
 [@gavinjoyce]: https://github.com/gavinjoyce
 [@sosukesuzuki]: https://github.com/sosukesuzuki

src/language-js/printer-estree.js

@@ -4711,6 +4711,7 @@ function printTypeParameters(path, options, print, paramsKey) {
   }
 
   const grandparent = path.getNode(2);
+  const greatGreatGrandParent = path.getNode(4);
 
   const isParameterInTestCall = grandparent != null && isTestCall(grandparent);
 
@@ -4723,7 +4724,13 @@ function printTypeParameters(path, options, print, paramsKey) {
           shouldHugType(n[paramsKey][0].id)) ||
         (n[paramsKey][0].type === "TSTypeReference" &&
           shouldHugType(n[paramsKey][0].typeName)) ||
-        n[paramsKey][0].type === "NullableTypeAnnotation"));
+        n[paramsKey][0].type === "NullableTypeAnnotation" ||
+        (greatGreatGrandParent &&
+          greatGreatGrandParent.type === "VariableDeclarator" &&
+          grandparent &&
+          grandparent.type === "TSTypeAnnotation" &&
+          n[paramsKey][0].type !== "TSConditionalType" &&
+          n[paramsKey][0].type !== "TSMappedType")));
 
   if (shouldInline) {
     return concat(["<", join(", ", path.map(print, paramsKey)), ">"]);

tests/typescript/custom/typeParameters/__snapshots__/jsfmt.spec.js.snap

@@ -108,3 +108,52 @@ type ReallyReallyReallyLongName<
 
 ================================================================================
 `;
+
+exports[`variables.ts 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const foo: SomeThing<boolean> = func();
+const bar: SomeThing<boolean, boolean> = func();
+const fooo: SomeThing<{ [P in "x" | "y"]: number }> = func();
+const baar: SomeThing<K extends T ? G : S> = func();
+const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaaaaaaaar: SomeThing<boolean, boolean> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaar: SomeThing<{ [P in "x" | "y"]: number }> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaaar: SomeThing<K extends T ? G : S> = looooooooooooooooooooooooooooooongNameFunc();
+const isAnySuccessfulAttempt$: Observable<boolean> = this._quizService.isAnySuccessfulAttempt$().pipe(
+  tap((isAnySuccessfulAttempt: boolean) => {
+    this.isAnySuccessfulAttempt = isAnySuccessfulAttempt;
+  }),
+);
+const isAnySuccessfulAttempt$: Observable<boolean> = this._someMethodWithLongName();
+
+=====================================output=====================================
+const foo: SomeThing<boolean> = func();
+const bar: SomeThing<boolean, boolean> = func();
+const fooo: SomeThing<{ [P in "x" | "y"]: number }> = func();
+const baar: SomeThing<K extends T ? G : S> = func();
+const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaaaaaaaar: SomeThing<
+  boolean,
+  boolean
+> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaar: SomeThing<
+  { [P in "x" | "y"]: number }
+> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaaar: SomeThing<
+  K extends T ? G : S
+> = looooooooooooooooooooooooooooooongNameFunc();
+const isAnySuccessfulAttempt$: Observable<boolean> = this._quizService
+  .isAnySuccessfulAttempt$()
+  .pipe(
+    tap((isAnySuccessfulAttempt: boolean) => {
+      this.isAnySuccessfulAttempt = isAnySuccessfulAttempt;
+    })
+  );
+const isAnySuccessfulAttempt$: Observable<boolean> = this._someMethodWithLongName();
+
+================================================================================
+`;

tests/typescript/custom/typeParameters/variables.ts

@@ -0,0 +1,14 @@
+const foo: SomeThing<boolean> = func();
+const bar: SomeThing<boolean, boolean> = func();
+const fooo: SomeThing<{ [P in "x" | "y"]: number }> = func();
+const baar: SomeThing<K extends T ? G : S> = func();
+const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaaaaaaaar: SomeThing<boolean, boolean> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaar: SomeThing<{ [P in "x" | "y"]: number }> = looooooooooooooooooooooooooooooongNameFunc();
+const baaaaaaaaaaaaaaaar: SomeThing<K extends T ? G : S> = looooooooooooooooooooooooooooooongNameFunc();
+const isAnySuccessfulAttempt$: Observable<boolean> = this._quizService.isAnySuccessfulAttempt$().pipe(
+  tap((isAnySuccessfulAttempt: boolean) => {
+    this.isAnySuccessfulAttempt = isAnySuccessfulAttempt;
+  }),
+);
+const isAnySuccessfulAttempt$: Observable<boolean> = this._someMethodWithLongName();