fix(ts): parenthesized assert and assign

[fedeci]

Q	A
Fixed Issues?	Fixes #12932
Patch: Bug Fix?	Yes
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

We treat ParenthesizedExpression node as a TSAsExpression in #toAssignable() so that the function recurses one more time.

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/44539/

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 62dc9f1:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[nicolo-ribaudo]

Can you add a test that with the TS plugin and createParenthesizedExpression ({}) = x still throws?

[fedeci]

It broke that, what about adding a check like this to the superclass' toAssignable

isParenthesizedAssignable(node) {
  const type = node.type
  return (
    type === "TSParameterProperty" || 
    type === "TSAsExpression" || 
    ... || 
    super.isParenthesizedAssignable(node)
  )
}

[thorn0]

I guess TSNonNullExpression and TSTypeAssertion should be here too

[fedeci]

Yes, I tried running some tests on those, but they work like magic😁

[JLHwung]

Like @thorn0 said, we still need to check for TSNonNullExpression and TSTypeAssertion. It the test is passing maybe there isn't a test which enables createParenthesizedExpressions. Clearly Babel parser 7.12 fails: https://astexplorer.net/#/gist/910487b331a19aac83c5489fa4203e66/4180181cff60d53a164ab16afb82a8e6e7d5698c

The error is thrown from

babel/packages/babel-parser/src/parser/lval.js

Line 91 in efdca01

this.raise(node.start, Errors.InvalidParenthesizedAssignment);

, which assumes that parenthesized assignment can be either identifier / member expression. This is not the cases for TypeScript, where TSNonNullExpression, TSAsExpression and TSTypeAssertion plays a role of transparent expression wrapper, which should have been unwrapped before check. Consider handle this as we did in

babel/packages/babel-helper-skip-transparent-expression-wrappers/src/index.js

Lines 11 to 18 in efdca01

	export function isTransparentExprWrapper(node: Node) {
	return (
	t.isTSAsExpression(node) ||
	t.isTSTypeAssertion(node) ||
	t.isTSNonNullExpression(node) ||
	t.isTypeCastExpression(node) ||
	t.isParenthesizedExpression(node)
	);

I think we can also simplifies how we handle toAssignable in the typescript plugin using this helper.

[fedeci]

isParenthesizedAssignable(node) {

  const type = node.type

  return (

    type === "TSParameterProperty" || 

    type === "TSAsExpression" || 

    ... || 

    super.isParenthesizedAssignable(node)

  )

}

Maybe I got confused and I tested it with this code which does almost the same of that helper.

[JLHwung]

Can you add following test cases with { "createParenthesizedExpressions": true }?

(a!) = null;
(<string>a) = null;

Like Georgii mentioned before, they should not throw.

[nicolo-ribaudo]

Thanks!

[nicolo-ribaudo]

I'll merge this in 15 mins, as soon as the release CI job on main finishes