Vue.js+TypeScriptを試した際の雑感

Vue.js, 良いですよね. ドキュメントも充実しているし, 読みやすいし, 個人開発する分には素早く楽しく開発できてとっても良いライブラリだなと思っています.

ただ, 開発をしているとやっぱり「型が欲しい!」という気持ちが生まれてしまうものです. そういう経緯でVue.jsにTypeScriptを上手く結合しようと色々調べたので, ここではその時に出てきた雑感を箇条書きで纏めておきます. Vue.jsはダメだとかTypeScriptは悪とかではなくて, ただのメモだと思って読んでもらえればと思います. 「その問題, これで解決するよ」とか「こんな方法あるよ」とかあればコメントなり @mizdra へのリプライなりで教えて頂けるとありがたいです 🙏

前提

• エディタ: VSCode
• Webアプリケーションの個人開発をしたい
• コンポーネント指向
• 型が欲しい
  • スクラッチになるのでFlowではなくTypeScriptで
• 楽しく開発したい

雑感

要約

• 問題が多く, まだ厳しい
• 問題は沢山あるけど, 解決しようという動きはあるので継続して追っていきましょう

未解決の問題

• 存在しないモジュールをSFCからimportしてもVSCode (というよりはvetur) でエラーにならない問題
  • https://github.com/vuejs/vetur/issues/355
  • めちゃめちゃ辛い
  • https://github.com/vuejs/vetur/issues/355#issuecomment-359221966
    • つらい
  • 対処法
    • VSCodeを再起動する
    • lang="ts" を lang="tsx" に書き換える (tsserverが再起動する?ので直る)
      • https://github.com/vuejs/vetur/issues/355#issuecomment-328185080
      • ｹﾞﾗｹﾞﾗ
    • SFCを諦めて, <script lang="ts" src="MyComponent.ts"></script> するなどスクリプトを別ファイルに切り出す (veturへの依存が無くなるので解決する)
      • https://github.com/vuejs/vetur/issues/355#issuecomment-362893880
      • SFCはVue.jsを採用する大きなメリットの1つなので, それを失うのは辛い…
• vuexのstoreに型が付いていない問題
  • store自体に型を付けるのは困難なのでヘルパーメソッド経由で型を付けるPRが進行中
    • https://github.com/vuejs/vuex/pull/1121
  • vuex-class でも同じアプローチでtype-safeなAPIを提供するPRが進行中
    • https://github.com/ktsn/vuex-class/pull/16
• テンプレートで型チェックや補完が効かない問題
  • @katashin さんが試行錯誤している段階
    • https://github.com/vuejs/vetur/pull/681
    • Vue のテンプレートの型チェックについて | Web 猫
  • JSXほど型付けしやすい構文になっていないので難しそう?
• オプションスタイルだと型が上手く付けられない問題
  • https://github.com/vuejs/vue/issues/6850
  • https://github.com/vuejs/vue/issues/6841
  • PropType という型を提供する形で進行中
    • https://github.com/vuejs/vue/pull/6856
  • 現状では vue-class-component, および vue-property-decorator を使えば何とかなる
  • PropType は vue-property-decorator の @Prop のオプションスタイル向け実装みたいな感じ?
  • これが入れば vue-class-component 要らなくなる気がするがどうだろう…
  • そもそも型が上手く付けられない問題を解消するために vue-class-component を使うのであって, 型付けできるのであれば使う必要はないという認識
  • オプションスタイルの型付けにおけるmixinや継承の対応状況はどうなっているんだろう

解決済みの問題

• オプションスタイルにおいて this に型が付かない問題
  • やって来る Vue 2.5 での TypeScript の変更 — Vue.js
  • TypeScript のサポート — Vue.js
  • TypeScriptで this の型が上手く付けられるようになったので解決した
  • 但し, 上にも書いたように依然としてオプションスタイルの props の型は正しく付けられない
• Lint
  • Vue + TypeScriptなプロジェクトにESLintを導入する - Please Drive Faster
  • vue-eslint-parser+typescript-eslint-parser で解決可能

代替手段

• Reactを使う
  • 静的解析し易いインターフェイス
  • 型がある
  • コンポーネントライブラリや関連ツールが充実している
  • 多くのプロダクションで実績がある
  • 開発元 (Facebook) の体勢が整っている
  • (Vue.jsと比べた時の) デメリット
    • Vue.jsほど楽に/簡単に書けない
    • 書いていてVue.jsほど楽しくない
    • JSXの可読性が低い
    • スタイルが付けづらい
    • Vuexのような扱いやすい状態管理ライブラリが無い
      • MobXはObservableを使って構築したStoreをreact-devtoolから参照するとエラーが発生する
        • https://github.com/mobxjs/mobx/issues/410
        • 辛い
        • this/bind問題とも付き合わないといけない
          • https://mobx.js.org/refguide/action.html#bound-actions
        • runInAction も何だかモヤッとする
          • https://mobx.js.org/refguide/action.html#-runinaction-name-thunk
      • Reduxは冗長&型が付けづらい
        • 一応 typescript-fsa を使えば型は付く
        • ちなみに 遅刻可視化ツール は typescript-fsa を使って作った (コードは公開していない)
        • 遅刻可視化ツールの規模ならRedux全然要らなかったけど…

参考

• オプションスタイルによる型付けを用いたWebアプリケーションの例
  • GitHub - RNGeek/emtimer: Emtimer is a cowntdown timer, which is simple and high functional.
  • 紹介記事: Emtimerの紹介 - mizdra's blog