Support TS4.9 satisfies operator

changelog_unreleased/typescript/13764.md

@@ -0,0 +1,16 @@
+#### Support TypeScript 4.9 (#13764 by @sosukesuzuki)
+
+Support [TypeScript 4.9](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9) features!
+
+##### [`satisfies` operator](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/#the-satisfies-operator)
+
+Supported by only `babel-ts` parser.
+
+<!-- prettier-ignore -->
+```tsx
+const palette = {
+  red: [255, 0, 0],
+  green: "#00ff00",
+  blue: [0, 0, 255]
+} satisfies Record<Colors, string | RGB>;
+```

src/language-js/needs-parens.js

@@ -11,6 +11,7 @@ import {
   isCallExpression,
   isMemberExpression,
   isObjectProperty,
+  isTSTypeExpression,
 } from "./utils/index.js";
 
 function needsParens(path, options) {
@@ -227,14 +228,23 @@ function needsParens(path, options) {
     // fallthrough
     case "TSTypeAssertion":
     case "TSAsExpression":
+    case "TSSatisfiesExpression":
     case "LogicalExpression":
       switch (parent.type) {
         case "TSAsExpression":
-          // example: foo as unknown as Bar
-          return node.type !== "TSAsExpression";
+        case "TSSatisfiesExpression":
+          // examples:
+          //   foo as unknown as Bar
+          //   foo satisfies unknown satisfies Bar
+          //   foo satisfies unknown as Bar
+          //   foo as unknown satisfies Bar
+          return (
+            node.type !== "TSAsExpression" &&
+            node.type !== "TSSatisfiesExpression"
+          );
 
         case "ConditionalExpression":
-          return node.type === "TSAsExpression";
+          return isTSTypeExpression(node);
 
         case "CallExpression":
         case "NewExpression":
@@ -265,7 +275,12 @@ function needsParens(path, options) {
         case "AssignmentPattern":
           return (
             key === "left" &&
-            (node.type === "TSTypeAssertion" || node.type === "TSAsExpression")
+            (node.type === "TSTypeAssertion" ||
+              node.type === "TSAsExpression" ||
+              // babel-parser cannot parse `satisfies` operator in left side of assignment
+              // https://github.com/babel/babel/issues/15095
+              // TODO: Add tests after the bug is fixed
+              node.type === "TSSatisfiesExpression")
           );
 
         case "LogicalExpression":
@@ -360,6 +375,7 @@ function needsParens(path, options) {
         case "SpreadElement":
         case "SpreadProperty":
         case "TSAsExpression":
+        case "TSSatisfiesExpression":
         case "TSNonNullExpression":
         case "BindExpression":
           return true;
@@ -592,6 +608,7 @@ function needsParens(path, options) {
         case "TSTypeAssertion":
         case "TypeCastExpression":
         case "TSAsExpression":
+        case "TSSatisfiesExpression":
         case "TSNonNullExpression":
           return true;
 
@@ -641,6 +658,7 @@ function needsParens(path, options) {
           return key === "object";
 
         case "TSAsExpression":
+        case "TSSatisfiesExpression":
         case "TSNonNullExpression":
         case "BindExpression":
         case "TaggedTemplateExpression":

src/language-js/print/call-arguments.js

@@ -19,6 +19,7 @@ import {
   isRegExpLiteral,
   isSimpleType,
   isCallLikeExpression,
+  isTSTypeExpression,
 } from "../utils/index.js";
 
 import {
@@ -186,7 +187,7 @@ function couldExpandArg(arg, arrowChainRecursion = false) {
     (arg.type === "ArrayExpression" &&
       (arg.elements.length > 0 || hasComment(arg))) ||
     (arg.type === "TSTypeAssertion" && couldExpandArg(arg.expression)) ||
-    (arg.type === "TSAsExpression" && couldExpandArg(arg.expression)) ||
+    (isTSTypeExpression(arg) && couldExpandArg(arg.expression)) ||
     arg.type === "FunctionExpression" ||
     (arg.type === "ArrowFunctionExpression" &&
       // we want to avoid breaking inside composite return types but not simple keywords
@@ -286,7 +287,7 @@ function isHopefullyShortCallArgument(node) {
     return isHopefullyShortCallArgument(node.expression);
   }
 
-  if (node.type === "TSAsExpression") {
+  if (isTSTypeExpression(node)) {
     let { typeAnnotation } = node;
     if (typeAnnotation.type === "TSArrayType") {
       typeAnnotation = typeAnnotation.elementType;

src/language-js/print/template-literal.js

@@ -17,6 +17,7 @@ import {
   isSimpleTemplateLiteral,
   hasComment,
   isMemberExpression,
+  isTSTypeExpression,
 } from "../utils/index.js";
 
 function printTemplateLiteral(path, print, options) {
@@ -87,7 +88,7 @@ function printTemplateLiteral(path, print, options) {
         isMemberExpression(expression) ||
         expression.type === "ConditionalExpression" ||
         expression.type === "SequenceExpression" ||
-        expression.type === "TSAsExpression" ||
+        isTSTypeExpression(expression) ||
         isBinaryish(expression)
       ) {
         expressionDoc = [indent([softline, expressionDoc]), softline];

src/language-js/print/ternary.js

@@ -4,6 +4,7 @@ import {
   getComments,
   isCallExpression,
   isMemberExpression,
+  isTSTypeExpression,
 } from "../utils/index.js";
 import { locStart, locEnd } from "../loc.js";
 import isBlockComment from "../utils/is-block-comment.js";
@@ -161,7 +162,7 @@ function shouldExtraIndentForConditionalExpression(path) {
 
     if (
       (node.type === "NewExpression" && node.callee === child) ||
-      (node.type === "TSAsExpression" && node.expression === child)
+      (isTSTypeExpression(node) && node.expression === child)
     ) {
       parent = path.getParentNode(ancestorCount + 1);
       child = node;

src/language-js/print/typescript.js

@@ -142,8 +142,10 @@ function printTypescript(path, options, print) {
       return printTypeParameters(path, options, print, "params");
     case "TSTypeParameter":
       return printTypeParameter(path, options, print);
-    case "TSAsExpression": {
-      parts.push(print("expression"), " as ", print("typeAnnotation"));
+    case "TSAsExpression":
+    case "TSSatisfiesExpression": {
+      const operator = node.type === "TSAsExpression" ? "as" : "satisfies";
+      parts.push(print("expression"), ` ${operator} `, print("typeAnnotation"));
       const { parent } = path;
       if (
         (isCallExpression(parent) && parent.callee === node) ||

src/language-js/utils/index.js

@@ -62,7 +62,7 @@ function hasNakedLeftSide(node) {
     node.type === "TaggedTemplateExpression" ||
     node.type === "BindExpression" ||
     (node.type === "UpdateExpression" && !node.prefix) ||
-    node.type === "TSAsExpression" ||
+    isTSTypeExpression(node) ||
     node.type === "TSNonNullExpression"
   );
 }
@@ -898,6 +898,7 @@ function startsWithNoLookaheadToken(node, forbidFunctionClassAndDoExpr) {
         forbidFunctionClassAndDoExpr
       );
     case "TSAsExpression":
+    case "TSSatisfiesExpression":
     case "TSNonNullExpression":
       return startsWithNoLookaheadToken(
         node.expression,
@@ -1219,6 +1220,12 @@ const markerForIfWithoutBlockAndSameLineComment = Symbol(
   "ifWithoutBlockAndSameLineComment"
 );
 
+function isTSTypeExpression(node) {
+  return (
+    node.type === "TSAsExpression" || node.type === "TSSatisfiesExpression"
+  );
+}
+
 export {
   getFunctionParameters,
   iterateFunctionParametersPath,
@@ -1280,4 +1287,5 @@ export {
   getComments,
   CommentCheckFlags,
   markerForIfWithoutBlockAndSameLineComment,
+  isTSTypeExpression,
 };

tests/config/format-test.js

@@ -37,6 +37,7 @@ const unstableTests = new Map(
     "typescript/prettier-ignore/mapped-types.ts",
     "js/comments/html-like/comment.js",
     "js/for/continue-and-break-comment-without-blocks.js",
+    "typescript/satisfies-operators/comments-unstable.ts",
   ].map((fixture) => {
     const [file, isUnstable = () => true] = Array.isArray(fixture)
       ? fixture

tests/format/typescript/argument-expansion/__snapshots__/jsfmt.spec.js.snap

@@ -38,6 +38,10 @@ const bar8 = [1,2,3].reduce((carry, value) => {
   return {...carry, [value]: true};
 }, <{[key: number]: boolean}>{1: true});
 
+const bar9 = [1,2,3].reduce((carry, value) => {
+  return [...carry, value];
+}, [] as foo);
+
 =====================================output=====================================
 const bar1 = [1, 2, 3].reduce(
   (carry, value) => {
@@ -95,6 +99,10 @@ const bar8 = [1, 2, 3].reduce(
   <{ [key: number]: boolean }>{ 1: true },
 );
 
+const bar9 = [1, 2, 3].reduce((carry, value) => {
+  return [...carry, value];
+}, [] as foo);
+
 ================================================================================
 `;
 

tests/format/typescript/argument-expansion/argument_expansion.ts

@@ -29,3 +29,7 @@ const bar7 = [1,2,3].reduce((carry, value) => {
 const bar8 = [1,2,3].reduce((carry, value) => {
   return {...carry, [value]: true};
 }, <{[key: number]: boolean}>{1: true});
+
+const bar9 = [1,2,3].reduce((carry, value) => {
+  return [...carry, value];
+}, [] as foo);