Rewrite TypeAnnotation and TSTypeAnnotation print

changelog_unreleased/typescript/14171.md

@@ -0,0 +1,33 @@
+#### Improve comment print and cursor tracking around type annotation (#14171 by @fisker)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+let foo /* comment */ : number;
+
+// Prettier stable
+let foo: /* comment */ number;
+
+// Prettier main
+<Same as input>
+```
+
+```js
+// Prettier stable
+prettier.formatWithCursor("let foo: number", {
+  cursorOffset: 7,
+  parser: "babel",
+}).cursorOffset;
+
+// -> 9
+
+// Prettier main
+(
+  await prettier.formatWithCursor("let foo: number", {
+    cursorOffset: 7,
+    parser: "babel",
+  })
+).cursorOffset;
+
+// -> 7
+```

src/language-js/needs-parens.js

@@ -218,6 +218,20 @@ function needsParens(path, options) {
         return true;
       }
       break;
+
+    case "TypeAnnotation":
+      if (
+        path.match(
+          undefined,
+          undefined,
+          (node, key) =>
+            key === "returnType" && node.type === "ArrowFunctionExpression"
+        ) &&
+        includesFunctionTypeInObjectType(node)
+      ) {
+        return true;
+      }
+      break;
   }
 
   switch (node.type) {
@@ -454,6 +468,18 @@ function needsParens(path, options) {
       }
     // fallthrough
     case "TSFunctionType":
+      if (
+        path.match(
+          (node) => node.type === "TSFunctionType",
+          (node, key) =>
+            key === "typeAnnotation" && node.type === "TSTypeAnnotation",
+          (node, key) =>
+            key === "returnType" && node.type === "ArrowFunctionExpression"
+        )
+      ) {
+        return true;
+      }
+    // fallthrough
     case "TSConstructorType":
       if (key === "extendsType" && parent.type === "TSConditionalType") {
         const returnTypeAnnotation = (node.returnType || node.typeAnnotation)
@@ -524,6 +550,18 @@ function needsParens(path, options) {
       );
 
     case "FunctionTypeAnnotation": {
+      if (
+        path.match(
+          undefined,
+          (node, key) =>
+            key === "typeAnnotation" && node.type === "TypeAnnotation",
+          (node, key) =>
+            key === "returnType" && node.type === "ArrowFunctionExpression"
+        )
+      ) {
+        return true;
+      }
+
       const ancestor =
         parent.type === "NullableTypeAnnotation" ? path.grandparent : parent;
 
@@ -832,12 +870,6 @@ function needsParens(path, options) {
           parent.type !== "VariableDeclarator" &&
           parent.type !== "YieldExpression")
       );
-    case "TypeAnnotation":
-      return (
-        key === "returnType" &&
-        parent.type === "ArrowFunctionExpression" &&
-        includesFunctionTypeInObjectType(node)
-      );
   }
 
   return false;

src/language-js/print/array.js

@@ -21,7 +21,8 @@ import {
 } from "../utils/index.js";
 import { locStart } from "../loc.js";
 
-import { printOptionalToken, printTypeAnnotation } from "./misc.js";
+import { printOptionalToken } from "./misc.js";
+import { printTypeAnnotationProperty } from "./type-annotation.js";
 
 /** @typedef {import("../../document/builders.js").Doc} Doc */
 
@@ -139,7 +140,7 @@ function printArray(path, options, print) {
 
   parts.push(
     printOptionalToken(path),
-    printTypeAnnotation(path, options, print)
+    printTypeAnnotationProperty(path, print)
   );
 
   return parts;

src/language-js/print/class.js

@@ -19,13 +19,13 @@ import { getTypeParametersGroupId } from "./type-parameters.js";
 import { printMethod } from "./function.js";
 import {
   printOptionalToken,
-  printTypeAnnotation,
   printDefiniteToken,
   printDeclareToken,
 } from "./misc.js";
 import { printPropertyKey } from "./property.js";
 import { printAssignment } from "./assignment.js";
 import { printClassMemberDecorators } from "./decorators.js";
+import { printTypeAnnotationProperty } from "./type-annotation.js";
 
 /**
  * @typedef {import("../../document/builders.js").Doc} Doc
@@ -245,7 +245,7 @@ function printClassProperty(path, options, print) {
     printPropertyKey(path, options, print),
     printOptionalToken(path),
     printDefiniteToken(path),
-    printTypeAnnotation(path, options, print)
+    printTypeAnnotationProperty(path, print)
   );
 
   const isAbstractProperty =

src/language-js/print/flow.js

@@ -17,6 +17,8 @@ import {
   printUnionType,
   printFunctionType,
   printIndexedAccessType,
+  printTypeAnnotation,
+  printTypeAnnotationProperty,
 } from "./type-annotation.js";
 import { printInterface } from "./interface.js";
 import { printTypeParameter, printTypeParameters } from "./type-parameters.js";
@@ -32,7 +34,6 @@ import {
 import { printBigInt } from "./literal.js";
 import {
   printOptionalToken,
-  printTypeAnnotation,
   printRestSpread,
   printDeclareToken,
 } from "./misc.js";
@@ -56,7 +57,11 @@ function printFlow(path, options, print) {
     case "DeclareModule":
       return ["declare module ", print("id"), " ", print("body")];
     case "DeclareModuleExports":
-      return ["declare module.exports", ": ", print("typeAnnotation"), semi];
+      return [
+        "declare module.exports",
+        printTypeAnnotationProperty(path, print),
+        semi,
+      ];
     case "DeclareVariable":
       return [printDeclareToken(path), "var ", print("id"), semi];
     case "DeclareExportDeclaration":
@@ -90,7 +95,7 @@ function printFlow(path, options, print) {
     // Type Annotations for Facebook Flow, typically stripped out or
     // transformed away before printing.
     case "TypeAnnotation":
-      return print("typeAnnotation");
+      return printTypeAnnotation(path, options, print);
     case "TypeParameter":
       return printTypeParameter(path, options, print);
     case "TypeofTypeAnnotation":
@@ -131,6 +136,8 @@ function printFlow(path, options, print) {
       return [
         name,
         printOptionalToken(path),
+        // `flow` doesn't wrap the `typeAnnotation` with `TypeAnnotation`, so the colon
+        // needs to be added separately.
         name ? ": " : "",
         print("typeAnnotation"),
       ];
@@ -198,7 +205,7 @@ function printFlow(path, options, print) {
       ];
     // Same as `RestElement`
     case "ObjectTypeSpreadProperty":
-      return printRestSpread(path, options, print);
+      return printRestSpread(path, print);
     case "QualifiedTypeofIdentifier":
     case "QualifiedTypeIdentifier":
       return [print("qualification"), ".", print("id")];
@@ -212,7 +219,7 @@ function printFlow(path, options, print) {
       return [
         "(",
         print("expression"),
-        printTypeAnnotation(path, options, print),
+        printTypeAnnotationProperty(path, print),
         ")",
       ];
 

src/language-js/print/function.js

@@ -44,6 +44,7 @@ import {
 } from "./function-parameters.js";
 import { printPropertyKey } from "./property.js";
 import { printFunctionTypeParameters, printDeclareToken } from "./misc.js";
+import { printTypeAnnotationProperty } from "./type-annotation.js";
 
 const isMethod = (node) =>
   node.type === "ObjectMethod" ||
@@ -436,15 +437,10 @@ function shouldPrintParamsWithoutParens(path, options) {
 /** @returns {Doc} */
 function printReturnType(path, print) {
   const { node } = path;
-  const returnType = print("returnType");
+  const returnType = printTypeAnnotationProperty(path, print, "returnType");
 
   const parts = [returnType];
 
-  // prepend colon to TypeScript type annotation
-  if (node.returnType?.typeAnnotation) {
-    parts.unshift(": ");
-  }
-
   if (node.predicate) {
     // The return type will already add the colon, but otherwise we
     // need to do it ourselves

src/language-js/print/misc.js

@@ -1,5 +1,6 @@
 import { isNonEmptyArray } from "../../common/util.js";
 import { indent, join, line } from "../../document/builders.js";
+import { printTypeAnnotationProperty } from "./type-annotation.js";
 
 function printOptionalToken(path) {
   const { node } = path;
@@ -68,18 +69,6 @@ function printFunctionTypeParameters(path, options, print) {
   return "";
 }
 
-function printTypeAnnotation(path, options, print) {
-  const { node, parent, key } = path;
-  if (!node.typeAnnotation) {
-    return "";
-  }
-
-  const isFunctionDeclarationIdentifier =
-    parent.type === "DeclareFunction" && key === "id";
-
-  return [isFunctionDeclarationIdentifier ? "" : ": ", print("typeAnnotation")];
-}
-
 function printBindExpressionCallee(path, options, print) {
   return ["::", print("callee")];
 }
@@ -104,8 +93,8 @@ function adjustClause(node, clause, forceSpace) {
   return indent([line, clause]);
 }
 
-function printRestSpread(path, options, print) {
-  return ["...", print("argument"), printTypeAnnotation(path, options, print)];
+function printRestSpread(path, print) {
+  return ["...", print("argument"), printTypeAnnotationProperty(path, print)];
 }
 
 function printDirective(rawText, options) {
@@ -133,7 +122,6 @@ export {
   printFunctionTypeParameters,
   printBindExpressionCallee,
   printTypeScriptModifiers,
-  printTypeAnnotation,
   printRestSpread,
   adjustClause,
   printDirective,

src/language-js/print/object.js

@@ -22,9 +22,10 @@ import {
 } from "../utils/index.js";
 import { locStart, locEnd } from "../loc.js";
 
-import { printOptionalToken, printTypeAnnotation } from "./misc.js";
+import { printOptionalToken } from "./misc.js";
 import { shouldHugTheOnlyFunctionParameter } from "./function-parameters.js";
 import { printHardlineAfterHeritage } from "./class.js";
+import { printTypeAnnotationProperty } from "./type-annotation.js";
 
 /** @typedef {import("../../document/builders.js").Doc} Doc */
 
@@ -170,7 +171,7 @@ function printObject(path, options, print) {
   let content;
   if (props.length === 0) {
     if (!hasComment(node, CommentCheckFlags.Dangling)) {
-      return [leftBrace, rightBrace, printTypeAnnotation(path, options, print)];
+      return [leftBrace, rightBrace, printTypeAnnotationProperty(path, print)];
     }
 
     content = group([
@@ -179,7 +180,7 @@ function printObject(path, options, print) {
       softline,
       rightBrace,
       printOptionalToken(path),
-      printTypeAnnotation(path, options, print),
+      printTypeAnnotationProperty(path, print),
     ]);
   } else {
     content = [
@@ -197,7 +198,7 @@ function printObject(path, options, print) {
       options.bracketSpacing ? line : softline,
       rightBrace,
       printOptionalToken(path),
-      printTypeAnnotation(path, options, print),
+      printTypeAnnotationProperty(path, print),
     ];
   }