[Bug]: x < y >= z is incorrectly considered an assignment expression in TypeScript

[evanw]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

fn(x < y, x >= y)

REPL: link

Configuration file name

No response

Configuration

No response

Current and expected behavior

When this TypeScript code is transformed into JavaScript by Babel, Babel fails with the following error:

/repl.ts: Invalid left-hand side in assignment expression. (1:3)

> 1 | fn(x < y, x >= y)
    |    ^
  2 |

The official TypeScript compiler succeeds with the following output instead:

fn(x < y, x >= y);

Environment

(I only ran Babel via the REPL)

Possible solution

Here's what I discovered when I fixed this for esbuild: TypeScript's parseTypeArgumentsInExpression function backtracks unless the trailing > comes from a > real token. This is subtle because TypeScript's type argument parser normally strips off the leading > from a token, which is why >> works in a<b<c>>(d). But it turns out that should only be done when you're in a type context. When you're in an expression context, the trailing > must not come from a token that has anything else after it. So for example a<b<c>>=(d) should not be considered a type argument list because parseTypeArgumentsInExpression encounters a >= token.

Additional context

I just fixed this bug in esbuild: evanw/esbuild#3111. I'm reporting it here because Babel appears to have a similar issue.

[babel-bot]

Hey @evanw! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.