JSからTSへ移行した Vue.jsプロダクトの型チェックを 漸進的に強化する

JSからTSへ移行した Vue.jsプロダクトの型チェックを 漸進的に強化する 2022/10/16 Vue Fes Japan

@KawamataRyo 👨💻 Engineer @LAPRAS inc 🔥 元消防士 ❤ TypeScript, Vue, Deno, React 🏄 懸垂, 個人開発

今日話すこと 💬

• Vue.js の TS 対応の歴史 • TS化が不完全なVue.jsプロダクトの 型チェックをどのように強化していったのか

Vue.jsのTS対応の歴史

Vue.js TS対応の歴史 2014 2016 2018 2020 2022

2014.2 Vue.js のローンチ Evan You氏によって Vue.js が公開 2014 2016 2018 2020 2022

2014.6 VueTSの登場 型定義ファイルの提供と、 Vue.jsのAPIをラップして TSから使えるようにしたプロジェクト が誕生 2014 2016 2018 2020 2022

2014.10 Vue.jsへのTS対応のIssue Vue.js本体のTS化や、TS対応についての 包括的なIssueが投稿された。 3年近くコメントが続き、 Vue.js 2.5のリリース時にクローズ 2014 2016 2018 2020 2022

2016.6 Vue Class Componentの誕生 TSのクラススタイルと、 デコレータを使いVueコンポーネントを 記述できるVue Class Componentが 誕生 2014 2016 2018 2020 2022

2017.10 TS環境の大幅改善 Vue 2.5のリリースにて デコレータなしの素のVueで thisの型推論が効くように 2014 2016 2018 2020 2022

2019.8 Composition APIのリリース Vue3のRFCより公開。 Vue.extendで必要だった 型アノテーションが不要で よりTSが書きやすく 2014 2016 2018 2020 2022

2020.11 Vue 3のリリース 内部ロジックもTSで書き換え より型安全なAPIも提供 2014 2016 2018 2020 2022

Vue.js の TS 対応その他のトピック🐙 ・ Templateでの型推論 ➜ vue-tscでの型チェック、Volarでのエディタサポート ・TemplateでのOptional Chainig, nullish colescring ➜ Vue3ではサポート ・ Store（Vuex）の型サポート ➜ Vuex 4.0での対応、型安全なPinia

Vue.js の TS 対応その他のトピック🐙 ・ Templateでの型推論 ➜ vue-tscでの型チェック、Volarでのエディタサポート ・TemplateでのOptional Chainig, nullish colescring ➜ Vue3ではサポート ・ Store（Vuex）の型サポート ➜ Vuex 4.0での対応、型安全なPinia

Vue.js の TS 対応その他のトピック🐙 ・ Templateでの型推論 ➜ vue-tscでの型チェック、Volarでのエディタサポート ・TemplateでのOptional Chainig, nullish colescring ➜ Vue3ではサポート ・ Store（Vuex）の型サポート ➜ Vuex 4.0での対応、型安全なPinia

Vue.js の TS 対応その他のトピック🐙 ・ Templateでの型推論 ➜ vue-tscでの型チェック、Volarでのエディタサポート ・TemplateでのOptional Chainig, nullish colescring ➜ Vue3ではサポート ・ Store（Vuex）の型サポート ➜ Vuex 4.0での対応、型安全なPinia

今はもうVue.jsのTS対応は充実している..!!

TS化が不完全なVue.jsプロダクトの 型チェックを強化する

どんなプロダクト？ 📦

構成: Django × Vue.js（2.6系） 初期コミット：2015年, 2018年 TS導入時期：2019年 関連ファイル数：Vue.js SFC 680, TS 750 ※ ※2つのプロダクトの合計

TS化が不完全とは？🤔

• ̀lang=“ts”̀としていないVue SFCファイルが多数ある • ̀strict: truè ではなく緩い型チェックとなっている • CIで型チェックが実行されていない • 型エラーが放置され一部ファイルでエディタが真っ赤 • strict: trueとすると型エラー総数（2,800）

当時のエディタ ※ Error Lensを使っているのでErrorが強調されてます ※ここまで赤いのは極々一部です

なぜ型チェックを強化したいの？🛡

・ 実行時エラーの回避 ・ 型推論・オートコンプリートによる開発体験の向上 ・ 保守性の向上（機能改修、リファクタでのデグレ回避） ・ Vue3バージョンアップへの布石 ・ 真っ赤なエディタをなんとかしたい

プロジェクト概要 🔧

プロジェクト名： 真のTypeScript化 リソース： 1名 + α 期間：2022年5月末〜現在 初期@yuichkun その後 @Masa-Shin にすすめてもらい、自分は方針決定・サポートのみ

どのように進めた？🛣

1. Design Doc の作成

Design Docとは？ なぜ、何のために、どのように開発をすすめるかを記 したドキュメント。 背景、設計、トレードオフ、リスクなどについてま とめた上で、メンバー間でレビューする。

実際に定めた制約 ・ 必要なければ無理にComposition API（setup）に書き直さない ・ TS ➜ Vue.js SFC Script部分 ➜ template部分の順で順次型エ ラーを修正する ・ 新規に型エラーが混入するのを防ぐため、まずCIでの型チェック を導入する

2. TS化のジレンマを解消する

TS化のジレンマ😵💫 CIで型チェックを実行して、 新規コードに型エラーが 混入することは防ぎたい 既存のコードに型エラーが多 VS すぎて、強い型チェックの設 定でCIを通すことができない

解消方法 💊 既存の型エラー全てに@ts-expect-errorをつけて 型エラーを回避した上で、CIに型チェックを追加する ※ @ts-expect-error は次行の型エラーを抑制するコメント。もし次行に 型エラーがなくなった場合は、@ts-expect-error自体がエラーになる

でもエラーがありすぎて大変🥲

ツールを作ろう🦾

kawamataryo suppress-ts-errors TypeScript Compiler APIを使い TSの型エラー発生箇所に、 @ts-expect-error のコメントを一括挿入 型エラーを無効化するCLIツール。 Vue.js SFCのscript部分にも対応

TS, TSXなど文脈をみて適切なコメントが挿入される

suppress-ts-errorを実行したPR TSを3.6 ➜ 4.1 にアップデート さらに strict: true にした上で、 @ts-expect-errorを追加

3. ＠ts-expect-errorを順次倒す

TS化のジレンマを解消し、 CIで型チェックを通すことが出来たので、 新規コードに型エラーが混入することは防げる 既存の型エラーを直すことに集中できる

TSのエラー種別ごとに、 ひたすら型エラーを解消していく

＠ts-expect-errorの追加 CIの型チェック強化 @ts-expect-errorの順次削除 TSファイル、Vue.js SFCの Script 部分の順で 実行していく。

その他工夫ポイント 💡

静的アセットの差分比較でレビュー負荷を軽減

GitHub ActionsでPRごとに静的アセットの ビルド結果をMasterブランチと比較。 ビルド結果に差分は出ない ➜ プロダクトの動作に変化はないなので、 di が多くても安心感を持ってマージ出来る ※Vue.js SFCの場合は、型の変更のみでも差分が ff 出たので、あくまでTSファイル限定

リファクタツールの利用・開発で効率化

miyaoka vue-composition-converter Options API を Composition APIに 自動変換するツール。 Setupに書き換えなければ、直らない型エラーを 持つコンポーネントの変換で利用

Masa-Shin de ne-component-converter Vue.extendやただのobjectを使っているlang=“ts”の Vue.js SFCファイルを、de neComponent(…)に変換する ツール。 Volarが Vue.extend では適切な型推論をしてくれない問題 fi fi を解決するために大活躍。

kawamataryo vue-script-typecheck Vue.js SFCのscript部分のみを型チェックするCLIツール。 Template部分の型エラーが多すぎてvue-tscをCIで実行す ることは出来ないが、suppress-ts-errorsで@ts-expecterrorを付与できるscript部分のみは型チェックしたいとい う思いから開発。

負債解消ダッシュボードで進捗状況を可視化

GitHub Actionsとzx、Datadogを使って、 作ったフロントエンドのコードベースの状況 を可視化するダッシュボード * Vue SFCのTS化率 * TS Errorの数（ts-exect-errorを含む） * カバレッジ などなどを日時で計測している。 ※ 数値はダミーです

結果 🏍

🔴 Before 🟢 After TypeScriptのバージョン 3.6系 4.1系 CIでの型チェック TSのみ TS + Vue SFC ※1 Strict FALSE TRUE 2,800 template部分 以外ほぼなし ※2 型エラー数

まとめ 🏁

・ 今のVue.jsでは TypeScript の恩恵を充分受けられる ・ TS化を順次すすめるには @ts-expect-error がおすすめ （suppress-ts-errorsも使ってね） ・ 負債解消プロジェクトは工夫次第で効率化が可能 Vue2環境でのVolorの対応などで一部ハマるところはあった が、型エラー解消自体は詰まるところあまりない。 ツールがあることで開発効率upに繋がった。

End