[Bug]: Weird AST for as in ArrayPattern

[sosukesuzuki]

💻

• Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

[a as any] = x;

Configuration file name

No response

Configuration

const { parse } = require("@babel/parser");

const input = `[a as any] = x;`

const result = parse(input, { plugins: ["typescript"] });

console.log(result):

Current and expected behavior

current:

{
  "type": "AssignmentExpression",
  "operator": "=",
  "left": {
    "type": "ArrayPattern",
    "elements": [
      {
        "type": "Identifier",
        "name": "a",
        "typeAnnotation": {
          "type": "TSAnyKeyword"
        }
      }
    ]
  },
  "right": {
    "type": "Identifier",
    "name": "x"
  }
}

expected:

{
  "type": "AssignmentExpression",
  "operator": "=",
  "left": {
    "type": "ArrayPattern",
    "elements": [
      {
        "type": "TSAsExpression",
        "expression": {
          "type": "Identifier",
          "name": "a"
        },
        "typeAnnotation": {
          "type": "TSAnyKeyword"
        }
      }
    ]
  },
  "right": {
    "type": "Identifier",
    "name": "x"
  }
}

Environment

System:
OS: macOS 10.15.7
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
npmPackages:
@babel/cli: ^7.17.0 => 7.17.0
@babel/core: ^7.17.0 => 7.17.8
@babel/eslint-config-internal: workspace:^ => 7.16.1
@babel/eslint-parser: workspace:^ => 7.17.0
@babel/eslint-plugin-development: workspace:^ => 7.17.7
@babel/eslint-plugin-development-internal: workspace:^ => 7.17.7
@babel/plugin-proposal-dynamic-import: ^7.16.7 => 7.16.7
@babel/plugin-proposal-export-namespace-from: ^7.16.7 => 7.16.7
@babel/plugin-proposal-object-rest-spread: ^7.16.7 => 7.16.7
@babel/plugin-transform-modules-commonjs: ^7.16.8 => 7.16.8
@babel/plugin-transform-runtime: ^7.17.0 => 7.17.0
@babel/preset-env: ^7.16.11 => 7.16.11
@babel/preset-flow: ^7.16.7 => 7.16.7
@babel/preset-typescript: ^7.16.7 => 7.16.7
@babel/runtime: ^7.17.0 => 7.17.0
babel-plugin-transform-charcodes: ^0.2.0 => 0.2.0
eslint: ^8.9.0 => 8.9.0
jest: ^27.4.0 => 27.4.0

Possible solution

No response

Additional context

prettier/prettier#12706

[thorn0]

One more test case: ({a: [x as any] } = { a: [2] }); is valid TS (playground), but Babel can't parse it: SyntaxError: Unexpected type cast in parameter position. (1:6)
(I wish I knew why TS needs this syntax...)

[nicolo-ribaudo]

Thanks! An even simpler reproduction is ([a as T] = b).

[thorn0]

Turns out ({a: x as any } = { a: [2] }); is valid too (playground), but Babel yields SyntaxError: Invalid left-hand side in object destructuring pattern. (1:5). #14500 fixes this.

[thorn0]

More things that are accepted by TS, but not by Babel:

• ({ ...x as T } = y);
• [...x as T] = y;

[nicolo-ribaudo]

Another one, that is accepted by Babel but not TS: (a! = c) => d

[nicolo-ribaudo]

This is fun

[thorn0]

Speaking of !: ({...x!} = y); (playground) yields SyntaxError: Invalid rest operator's argument.

Also I've just realized that destructurings in ES can be used in the middle of assignment chains: let b = { a } = { a: 1 }, but Babel seems to have no problem with that.

[nicolo-ribaudo]

Fun fact: ([...[]] = []) is valid, but ({...{}} = {}) isn't.

[JLHwung]

Speaking of !: ({...x!} = y); (playground) yields SyntaxError: Invalid rest operator's argument.

Also I've just realized that destructurings in ES can be used in the middle of assignment chains: let b = { a } = { a: 1 }, but Babel seems to have no problem with that.

Yeah an assignment expression is perfectly valid RHS. The transform spent some efforts preserving the completion.