Help us understand the problem. What is going on with this article?

transform-flow-strip-types と transform-decorators-legacy を同時に使う時、気をつけること

More than 3 years have passed since last update.

transform-decorators-legacy でデコレータと transform-flow-strip-types で flowtype を一緒に使う場面ありますよね。

このとき、プラグイン定義の順序が重要になってきます。

誤: transform-flow-strip-types を先に定義する

この場合、特定の場合におかしくなります。

  "plugins": [
    "transform-flow-strip-types",
    "transform-decorators-legacy"
  ],

具体例として、mobx の @observable を使ってみましょう。

class Counter {
  @observable count: ?number;
}

これの babel のトランスパイル後のコードはコチラ。

var Counter = function Counter() {
  (0, _classCallCheck3.default)(this, Counter);
};

わー。見事に observable な定義が無かったことになっていますね。ちなみに

class Counter {
  @observable count: ?number = null;
}

と初期値が undefined でなく null だった場合

var Counter = exports.Counter = (_class = function Counter() {
  (0, _classCallCheck3.default)(this, Counter);

  _initDefineProp(this, "count", _descriptor, this);
}, _descriptor = _applyDecoratedDescriptor(_class.prototype, "count", [_mobx.observable], {
  enumerable: true,
  initializer: function initializer() {
    return null;
  }
}), _class);

とバッチリ定義されるので、ハマったときにさらに解りにくかったります。というか自分が @observable だけど上手く動いたり動かなかったりする現象で何が問題なのかを見つけるまでハマりました…。

正: transform-flow-strip-types を後に定義する

  "plugins": [
    "transform-decorators-legacy",
    "transform-flow-strip-types"
  ],

この定義の場合、デコレータの処理が先にされるため

class Counter {
  @observable count: ?number;
}

のトランスパイル後のコードが

var Counter = exports.Counter = (_class = function Counter() {
  (0, _classCallCheck3.default)(this, Counter);

  _initDefineProp(this, "count", _descriptor, this);
}, _descriptor = _applyDecoratedDescriptor(_class.prototype, "count", [_mobx.observable], {
  enumerable: true,
  initializer: null
}), _class);

と、undefinded だったとしても mobx.observable な処理がされ、適切に動作します。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away