kenjuの日記

About Programming, Mathematics and Security

TypeScript化の調査 2017年1月現在(React v15.4.1, TypeScript 2.1.4)

仕事でTypeScript導入の機運があったので、

  • TypeScript化にあたってのProps/Consまとめ
  • 個人プロジェクトをIsomorphic TypeScriptで書いて見た際の知見

をまとめて見た。

Pros

  • jsファイルもトランスパイル対象なので、究極コードの書き換えをする必要はない
  • ライブラリを使用する際に型定義ファイルが揃っていると開発効率が非常に上がる
    • 補完が効く上、APIドキュメントが不十分でも戻り値や引数が明確になる
      • 自分の場合は、APIサーバーのExpressやPostgreSQLのアダプターのライブラリを使う時に特に優位性を感じた
  • React Componentを書く際のメリット
    • Interfaceを使ってStateの事前条件も定義できる

Cons

  • 逆にTypeScript -> JavaScriptに戻すリスクは拭えない
    • A is B, but B is not A
  • 正直「React Componentを書いている」間は、TypeScriptならではのメリットを感じることは少ししかなかった
    • React Componentの事前条件の定義としては、現行のPropTypesで十分
      • VSCodeだと、TypeScriptだと補完が効いてコーディングの効率が上がるというメリットはあるが、型を使うことの本質的メリットではない

Neither

  • 「Reactは素のJS + 一部FlowTypeで、dtsは手動でメンテナンスしている」という状況は変わらない
  • TypeScriptのトランスパイル実行時間がかかる?
    • 現状Babelを使っているので、それに代替すると考えれば(正確なビルド時間は計っていないが)プラスでもマイナスでもない

知見

  • 踏んだ
    • TypeScriptのライブラリ読み込みのエントリーポイントのバグ
  • VSCodeにバンドルされているデバッグ機能とかはほとんど使っていない
    • 個人プロジェクト開始時にセットアップしたものの、cliツールやwebpackが充実しているので、結局使わなくなって削除した
  • TSLintは早熟な感じ
    • Lintの出力結果がサバサバしている印象で、まだそこらへんのUIや使い勝手にはコストをかけられていない様子(見辛い、色分けとかがない、ファイルごとのセクショニングもないなど)
    • --fix で修正できるルールが少ない
    • ESLintのreactプラグインや、Airbnbプラグインのような「ベストプラクティス」事例は少ない様子
      • とはいえ、TSLint自体がrecommendedオプションを提供しているので、基本そのルールにそえば良い気はする
  • テストが書きづらい時がある