[Bug]: Order of constructor parameter properties vs class properties initializers - Discrepency between typescript and bable

💻

• Would you like to work on a fix?

How are you using Babel?

@rollup/plugin-babel

Input code

Original Code:

class Dashboard {
    name = 'stats' + this.amount;

    constructor(
        readonly amount
    ) { 
    }
}

Babel Emit:

"use strict";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class Dashboard {
  constructor(amount) {
    _defineProperty(this, "name", 'stats' + this.amount);

    this.amount = amount;
  }
}

Typescript emits:

class Dashboard {
    constructor(amount) {
        this.amount = amount;
        this.name = 'stats' + this.amount;
    }
}

Configuration file name

babel.config.js

Configuration

For reproduction I’ve used the Babel online repl with Env stage 2 preset and Typescript preset. link

For typescript reproduction I’ve used Typescript playground. link

Current and expected behavior

Current Behavior - Babel puts parameter properties in the constructor after class properties assignment. Typescript puts them before.

Expected Behavior - Its a discrepancy. Not sure if Babel is the responsible or Typescript. Typescript behavior is more preferable to me because it makes writing shorter for me.

Environment

• Babel - 7.15.7
• Typescript - 4.4.2

Possible solution

Not sure. I’ve found some issues talking about plugin orders but I’m not sure.

Additional context

No response

[nicolo-ribaudo]

When comparing TS with Babel, you should always enable the useDefineForClassFields TS option: it’s the option that makes TS class fields like JS class fields, which is what Babel does and what TC will do in a future version.

After enabling that option, if you target ES2015-ES2021 it will first initialize this.amount and then this.name. However, if you target ESNext (and soon ES2022, when it’s supported), it first initializes this.name and then this.amount.

I suggest reporting this inconsistency to the TS team: when they’ll decide which is the correct order we’ll do the same.

[nicolo-ribaudo]

Yeah, but MDN doesn’t define parameter properties, which are a TS extension.