Vue2 x JavaScript と Vue2 x TypeScript の環境を行き来して
Vue2 x JavaScript と Vue2 x TypeScript の環境を交互で開発し、約半年が経ちました。
振り返ってみると、しみじみ TypeScript のメリットがわかりました。（デメリットはなかったです。）
自分が感じたメリットをメモしておきます。もし Vue2 x JavaScript をメインで開発されている方で、TypeScriptにまだ抵抗ある方がいらっしゃったら、参考にしてみてください。
事例
自分がいうまでもなく、保守性等をあげるためにTypeScriptを導入している事例はいっぱいありますので、そちらを参照するといいかもです。
（本記事執筆時点の）最近だと、Sansanさんの事例が新しいのかな 🤔
自分が感じたメリット
ざっくり2つです。
キャッチアップしやすくなる
- Vue2 x JavaScript の環境で久しぶりに触るコンポーネント
propsやdataに定義しているObject型のプロパティに何が入るのかわかりにくい- 時には
null,undefinedが代入されているかもしれない
こんな状況が重なると、以前ソースを触った方であっても、一定期間後に触るとキャッチアップコストが高いです。
また「このコンポーネントは、知見のあるあの人しか直せない。私が直すなら、2,3倍のコストがかかります。」のような属人化が発生しうる状況を促進させてしまいます。
TypeScriptかつ適切に型をつけることで、ソースがドキュメントやコメント文の代わりとなり、キャッチアップコストを低くします。
キャッチアップしやすくなるということは、影響範囲も掴みやすくなるため、属人化促進を避けやすくなります。1
型推論が楽しい
型をつけることにより、型推論が効くようになります。
補完が効かないコードが補完されるようになり、型チェックも行われる。これが単純に楽しく、anyを頑張って潰していこうという気持ちにさせてくれます。
TypeScriptを使わずとも、VSCodeのならjsconfig.json等を配置すれば、ある程度補完が効くようになりますが、型がつけられないため限度があります。
途中からTypeScriptを導入するなら、（あまりやりたくはありませんが）初期のtsconfig.jsonはstrict: falseとし、ローカル環境下ではstrict: trueに設定。型付けの習慣づけとany潰しをおこなっていくといいのかな...と思います。
APIの型付け問題
APIのレスポンスを元に、型更新するのは辛いなぁ...という問題にぶち当たってます。
現状だと、HTTPClientまで生成してくれるOpen API Generator一択かな...という感じです。
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活 | GiFT（ギフト）株式会社
aspidaも気になってます。素振りしてみようかな...
おわり
TypeScript の恩恵を受けて、 Vue2 x JavaScript の環境にも TypeScript 導入を図っています。
の記事の通りにならないよう、strict: trueの状態でやっていきです。
以上です。
