Support decorator auto accessors syntax (#13919)

* Install new ts-estree

* Print auto accessor properties

* Support edge cases

* Misc tests

* Add tests for auto accessor with type annotations

* Add changelog

* Update changelog_unreleased/typescript/13919.md

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

* Update changelog_unreleased/typescript/13919.md

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

* Print semicolon for accessor and add tests

* Add TODO comment

* Add  to properties list

* Address review

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

changelog_unreleased/typescript/13919.md

@@ -0,0 +1,12 @@
+#### Support auto accessors syntax (#13919 by @sosukesuzuki)
+
+Support for [Auto Accessors Syntax](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#auto-accessors-in-classes) landed in TypeScript 4.9.
+
+(Doesn't work well with `babel-ts` parser)
+
+<!-- prettier-ignore -->
+```tsx
+class Foo {
+  accessor foo: number = 3;
+}
+```

package.json

@@ -27,7 +27,7 @@
     "@babel/parser": "7.20.1",
     "@glimmer/syntax": "0.84.2",
     "@iarna/toml": "2.2.5",
-    "@typescript-eslint/typescript-estree": "5.44.0",
+    "@typescript-eslint/typescript-estree": "5.45.0",
     "acorn": "8.8.0",
     "acorn-jsx": "5.3.2",
     "angular-estree-parser": "2.5.1",

src/language-js/print/class.js

@@ -209,7 +209,11 @@ function printClassProperty(path, options, print) {
   if (node.static) {
     parts.push("static ");
   }
-  if (node.type === "TSAbstractPropertyDefinition" || node.abstract) {
+  if (
+    node.type === "TSAbstractPropertyDefinition" ||
+    node.type === "TSAbstractAccessorProperty" ||
+    node.abstract
+  ) {
     parts.push("abstract ");
   }
   if (node.override) {
@@ -221,7 +225,11 @@ function printClassProperty(path, options, print) {
   if (node.variance) {
     parts.push(print("variance"));
   }
-  if (node.type === "ClassAccessorProperty") {
+  if (
+    node.type === "ClassAccessorProperty" ||
+    node.type === "AccessorProperty" ||
+    node.type === "TSAbstractAccessorProperty"
+  ) {
     parts.push("accessor ");
   }
   parts.push(

src/language-js/print/statement.js

@@ -168,14 +168,21 @@ const isClassProperty = ({ type }) =>
   type === "ClassProperty" ||
   type === "PropertyDefinition" ||
   type === "ClassPrivateProperty" ||
-  type === "ClassAccessorProperty";
+  type === "ClassAccessorProperty" ||
+  type === "AccessorProperty" ||
+  type === "TSAbstractPropertyDefinition" ||
+  type === "TSAbstractAccessorProperty";
 /**
  * @returns {boolean}
  */
 function shouldPrintSemicolonAfterClassProperty(node, nextNode) {
-  const name = node.key && node.key.name;
+  const { name } = node.key;
   if (
-    (name === "static" || name === "get" || name === "set") &&
+    (name === "static" ||
+      name === "get" ||
+      name === "set" ||
+      // TODO: Remove this https://github.com/microsoft/TypeScript/issues/51707 is fixed
+      name === "accessor") &&
     !node.value &&
     !node.typeAnnotation
   ) {

src/language-js/print/typescript.js

@@ -115,6 +115,7 @@ function printTypescript(path, options, print) {
     case "TSAbstractMethodDefinition":
     case "TSDeclareMethod":
       return printClassMethod(path, options, print);
+    case "TSAbstractAccessorProperty":
     case "TSAbstractPropertyDefinition":
       return printClassProperty(path, options, print);
     case "TSInterfaceHeritage":

src/language-js/printer-estree.js

@@ -98,6 +98,8 @@ function genericPrint(path, options, print, args) {
     type === "ClassPrivateMethod" ||
     type === "ClassProperty" ||
     type === "ClassAccessorProperty" ||
+    type === "AccessorProperty" ||
+    type === "TSAbstractAccessorProperty" ||
     type === "PropertyDefinition" ||
     type === "TSAbstractPropertyDefinition" ||
     type === "ClassPrivateProperty" ||
@@ -766,6 +768,7 @@ function printPathNoParens(path, options, print, args) {
     case "PropertyDefinition":
     case "ClassPrivateProperty":
     case "ClassAccessorProperty":
+    case "AccessorProperty":
       return printClassProperty(path, options, print);
     case "TemplateElement":
       return replaceTextEndOfLine(node.value.raw);