Upgrade to Pro — share decks privately, control downloads, hide ads and more …

stand.fmのTypeScriptへの移行と活用/migrating-to-typescr...

stand.fm
November 10, 2021

 stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm

stand.fm

November 10, 2021
Tweet

More Decks by stand.fm

Other Decks in Technology

Transcript

  1. いまの stand.fm プロジェクト • アプリ、Web、サーバーサイド全てJavaScript ◦ React Native, React(React Native

    for Web), Node.js ◦ メインはFlow、一部はTypeScript • Monorepo (npm パッケージ) • プロジェクトごとにTypeScriptへの移行を開始 ◦ 新しくプロジェクトを作る時はTypeScript
  2. flow to TypeScript 1. 周辺ツールやビルド設定 2. flowtsでTSに変換 3. 型エラーを修正 •

    検討した移行ツール ◦ flowts: https://github.com/zxbodya/flowts ◦ flow-to-ts: https://github.com/Khan/flow-to-ts
  3. 型エラーリストの作成 • @aivenio/tsc-output-parser ◦ tscの出力をJSON形式に ◦ https://github.com/aiven/tsc-output-parser • JSONを集計 ◦

    ファイル単位のエラー数 ◦ エラーの種類ごとの数 • どんな種類のエラーがどれくらいでるのか見通しがたった
  4. Typeカバレッジ • カバレッジの変化を確認 ◦ flow-coverage-report ▪ https://github.com/rpl/flow-coverage-report ◦ typescript-coverage-report ▪

    https://github.com/alexcanessa/typescript-coverage-report • flowtsでTS化するだけでカバレッジが上がった ◦ 最大で30%ほど上がったプロジェクトがあった
  5. ライブラリの型定義 • Flow Project: ライブラリの型定義が用意されてない場合 ◦ any or TypeScriptの型定義からFlowの型定義に変換 (flowgen)

    ◦ 不完全 & 追従が手間 • TS Project: ライブラリ本体で型定義が用意されてない場合は DefinitelyTypedからインストール • 移行時: 足りない@typesパッケージをまとめてインストール
  6. ライブラリの型定義ファイルのバージョン • typesync ◦ packge.jsonのtypes, typingsが無い & @types/packageが ある パッケージをインストール

    • インストールするバージョン ◦ typesyncはライブラリ本体のパッケージのsemverを尊重 ◦ もちろん、semverが揃ってないものもある ▪ 個別に型定義ファイルのヘッダーをチェックしたり ▪ 可能な限り対応するバージョンは揃えた
  7. Monorepo内での依存とビルド • Flow Project: Babelでビルド ◦ build時は依存しているパッケージもビルドが必要 • 依存関係を管理 ◦

    ビルドコマンドに依存するプロジェクトのビルドを追加 ▪ 全部ビルドするのにも時間がかかる ◦ 新しく依存するプロジェクトが増えた時にもれやすい
  8. Project References • Project Referencesを活用 ◦ references: [], composite: true,

    declaration: true • tsc --buildで依存しているプロジェクトも含めて適切な順番でビル ド(incremental build) • Babelのままだと使えないので、TS化のタイミングでビルドをtscに 移行
  9. エラーハンドリング • 関数で発生しうるエラーも型で宣言して適切にハンドリングしたい • Either型 ◦ type Either<T, U> =

    <Left<T> | Right<U>> ◦ 成功時・失敗時の型を表現 • 特に異常系が発生しやすい層では、Either型を返すように ◦ DBアクセスなど
  10. We are hiring! エンジニア積極的に募集中です https://corp.stand.fm/recruit 詳細はこちら • CTO候補 • VPoE候補

    • クライアントエンジニア • バックエンドエンジニア • 機械学習エンジニア • 配信基盤エンジニア • QAエンジニア • エンジニアリングマネージャー • UI/UXデザイナー 積極募集しているプロダクト開発メンバー