Skip to content

Malformed generated TypeScript with class decorator, plugin-syntax-typescript, and a decorated abstract class #17320

@tbroyer

Description

@tbroyer

💻

  • Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

function classDec(target, context) {}

@classDec
abstract class C {
  static foo = false;
}

REPL

Configuration file name

babel.config.json

Configuration

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }],
    "@babel/plugin-syntax-typescript"
  ]
}

Current and expected behavior

Expected behavior: generated code is well-formed TypeScript that can be executed with node --experimental-strip-types (or parsed by tsc).

Current behavior: generates malformed TS:

// …
function classDec(target, context) {}
let _C;
new class extends _identity {
  static [abstract class C {
    static {
      [_C, _initClass] = _applyDecs(this, [classDec], []).c;
    }
  }];
  foo = false;
  constructor() {
    super(_C), _initClass();
  }
}();

That abstract class used as a static property name is not well-formed TS. See TypeScript Playground failing with errors:

Member '[abstract' implicitly has an 'any' type.
Cannot find name 'abstract'.
Expected 6 arguments, but got 3.
Cannot find name 'foo'.
Cannot find name 'constructor'.
Super calls are not permitted outside constructors or in nested functions inside constructors.
']' expected.
Declaration or statement expected.
';' expected.
Declaration or statement expected.
Expression expected.

Environment

System:
OS: Linux 6.14 Arch Linux
Binaries:
Node: 22.15.1 - /usr/bin/node
Yarn: 1.22.22 - /usr/bin/yarn
npm: 11.4.0 - /usr/bin/npm
pnpm: 8.6.0 - /usr/bin/pnpm
npmPackages:
@babel/cli: ^7.27.0 => 7.27.2
@babel/core: ^7.26.10 => 7.27.1
@babel/plugin-proposal-decorators: ^7.25.9 => 7.27.1
@babel/plugin-syntax-typescript: ^7.25.9 => 7.27.1
eslint: ^9.25.0 => 9.26.0

Possible solution

Dropping the abstract keyword should be enough (typing is already borked, so it won't change much).

Additional context

I'm writing a library of decorators and testing them using tsc and Babel's plugin-proposal-decorators from the same TS source. When using Babel, I'm only interested in transforming the decorators, now that Node.js can strip types to run TS, so I'm only using the plugin-syntax-typescript, not the plugin-transform-typescript.

A workaround is to use the plugin-transform-typescript, so you could just close this issue as a "non standard" and unsupported use of the Babel plugins.

Metadata

Metadata

Assignees

No one assigned

    Labels

    i: needs triageoutdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions