最近の砂場活動その13: Vue.js + Nuxt.jsで構築したアプリケーションをTypeScript化する

趣味プロジェクトであるML-Newsのフロントを整備したのは約一年前。その頃はVue.jsのTypeScript対応も微妙な時期(?)だった。

• 最近の砂場活動その3: フロントエンド編(Vue.js/SPA) - yasuhisa's blog

ちょいちょいTypeScriptサポート対応したよという声も(個人的に)見るようになった気がして、自分もやってみることにした。趣味プロジェクトのように忙しいときは結構触らない期間があるプロジェクトでは、型が分かったりlinterで怒ってくれるサポートがあるのはありがたいのである(普段はScala / Golan /Python with mypyで生活しているので)。

やったこと

• 普通の関数の引数、戻り値に型を書いていく
  • VSCodeで補完も効くようになって快適感上がった
  • 最初から全部やると疲れるので、要所以外はanyでひとまず〜という感じでもよさそう
  • ref: TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に（gfx執筆） - エンジニアHub｜若手Webエンジニアのキャリアを考える！
• APIとよくやり取りする型を~/models以下に定義
  • この辺
• <script lang="ts">を丁寧に付けていく
• asyncDataをComponent側に定義
• data () { ... }で定義していた状態を普通のTypeScriptのフィールドにしていく
• ComponentやPropをvue-property-decorator由来のものに置き換えていく
• 小さいプロジェクトであるとはいえ、一度にやるとしんどいので、分割して進める
  • 管理画面だけ、とか
  • 検索画面だけ、とか
• TypeScript化で状況が多少よくなったので、eslintを導入して治安をよくした

困ったこと

導入するためにちょい困ったりはしたけど、得られた恩恵のほうが大きいかなという印象です。

• watchQuery関係のTypeScript化の事例があまり見当たらなくて、動かすまでにちょっと苦労した...
  • 検索ページのtypescript化 by syou6162 · Pull Request #159 · syou6162/go-active-learning-web
  • ドキュメントにある事例はjsの事例がほとんど...
• headをComponent側に書かないといけないことを知らなくてしばらくメタ情報なしになっていた