Metro: Typescript constructor parameter properties is not working.

[soh335]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
Currently, don't work typescript constructor parameter properties correctly.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

repo here

class Employee extends Person {
   constructor(public name: string) {
     super();
   }
 }

yarn test change this typescript file to this.

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

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var Employee = function (_Person) {
  _inherits(Employee, _Person);

  function Employee(name) {
    _classCallCheck(this, Employee);

    return _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this));
  }

  return Employee;
}(Person);

What is the expected behavior?

Employee like this

  function Employee(name) {
    var _this;

    _classCallCheck(this, Employee);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this));
    _this.name = name;
    return _this;
  }

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

metro: 0.45.4
node: v10.10.0
yarn: 1.9.4
macOS: 10.13.6

{
  "devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/plugin-transform-typescript": "^7.1.0",
    "metro-react-native-babel-preset": "^0.45.4"
  }
}

[rafeca]

Hi! Thanks for reporting the issue!

Metro does not do anything with TypeScript files: it just relies on the @babel/plugin-transform-typescript, can you report the issue there?

Thanks!

[soh335]

@rafeca maybe plugin order issue in src/configs/main.js .

yarn exec -- babel --plugins=@babel/transform-classes,@babel/transform-typescript --verbose index.tsx
yarn exec v1.9.4
warning package.json: No license field
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

let Employee =
/*#__PURE__*/
function (_Person) {
  _inherits(Employee, _Person);

  function Employee(name) {
    _classCallCheck(this, Employee);

    return _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this));
  }

  return Employee;
}(Person);

✨  Done in 0.36s.

yarn exec -- babel --plugins=@babel/transform-typescript,@babel/transform-classes --verbose index.tsx
yarn exec v1.9.4
warning package.json: No license field
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

let Employee =
/*#__PURE__*/
function (_Person) {
  _inherits(Employee, _Person);

  function Employee(name) {
    var _this;

    _classCallCheck(this, Employee);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this));
    _this.name = name;
    return _this;
  }

  return Employee;
}(Person);

✨  Done in 0.37s.

[rafeca]

uhhh, that's interesting...

Do you want to send a PR to fix this?

This is where the TypeScript plugin is defined:

https://github.com/facebook/metro/blob/4b4f97fcd8b01cc646067fbf6047597d6ba8b199/packages/metro-react-native-babel-preset/src/configs/main.js#L143-L148

And the class plugin is defined in:

https://github.com/facebook/metro/blob/4b4f97fcd8b01cc646067fbf6047597d6ba8b199/packages/metro-react-native-babel-preset/src/configs/main.js#L95-L97

In order to verify that the behaviour is correct, you can modify the TypeScript file in our end to end tests to include a class. The end to end tests build a bundle and execute it so it should give good signal about whether the solution works fine.

[soh335]

@rafeca submitted p-r. But I'm not familiar with babel and metro. So, I don't have confidence in my p-r. Please review it.

[rafeca]

Closing the issue, the PR got included in v0.48.0 🎉