flowでプライベートフィールドを使う

3114 ワード
JavaScript flow JavaScript テキストリンク

実はFlow v0.54の段階でプライベートフィールドは使えていたんですが、Class Public Instance Fields & Private Instance FieldsがStage 3になってそろそろな感じなので試してみます。
とはいっても、前から_プレフィックスでプライベートとかできたんですが、まあStage3まできたらtc39に感謝しつつPrivate Instance Fieldsを使ってもいいと思います。

他のproposalsを確認するには、https://github.com/tc39/proposals あたりを見るとよいでしょう。

インストール

yarn add --dev @babel/cli @babel/core @babel/preset-flow @babel/preset-stage-3 flow-bin
yarn run flow init

.babelrc

{
  "presets": [
    "@babel/preset-stage-3",
    "@babel/preset-flow"
  ]
}

サンプル

とりあえずプライベートインスタンスにアクセスできないことを確認する

// @flow
class SuperCounter {
  count1 = 0
  #count2 = 0
}

class Counter extends SuperCounter {
  #count3 = 0
  inc () {
    this.count1 += 1
    this.#count2 += 1 // error
    this.#count3 += 1
  }
}

もちろん、コンパイルできない。

$ yarn run babel src -d dest

SyntaxError: /Users/akameco/src/github.com/akameco/toy-box/js/flow-private-field/src/index.js: Unknown PrivateName "#count2"
   9 |   inc () {
  10 |     this.count1 += 1
> 11 |     this.#count2 += 1
     |          ^
  12 |     this.#count3 += 1
  13 |   }
  14 | }

気持ち

型エラーは効くのだけど、Atomだと#をつけた時点で補完が効かなくて、現状の使い心地は微妙。Flow v0.74でLSP対応のための大幅な進歩したらしいからこの辺は今後に期待といった感じか。