Property binding order in JavaScript classes (what TypeScript will not save you from)

property-binding-order.ts

class Foo {
    options = {
        ns: this.namespaces
    };

    constructor(namespaces = []) {
      this.namespaces = namespaces;
    }
}

console.log(
    new Foo().namespaces, // []
    new Foo().options.ns // undefined
)

When you do this in TypeScript:

class Foo {
    options = {
        ns: this.namespaces
    };

    constructor(public namespaces = []) {
      this.namespaces = namespaces;
    }
}

The generated JavaScript will look like this:

class Foo {
    constructor(namespaces = []) {
        this.namespaces = namespaces;
        this.options = {
            ns: this.namespaces
        };
        this.namespaces = namespaces;
    }
}

console.log(
    new Foo().namespaces, // []
    new Foo().options.ns // []
)

Which makes it work.

On the contrary, Babel does not pull property assignment into the constructor.

"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

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; }

var Foo = function Foo() {
  var namespaces = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

  _classCallCheck(this, Foo);

  _defineProperty(this, "options", {
    ns: this.namespaces
  });

  this.namespaces = namespaces;
  this.namespaces = namespaces;
};

console.log(new Foo().namespaces, // []
new Foo().options.ns // undefined
);