Next.jsやVue.jsを利用して、Typescriptを利用する方法は、3パターンあります。

  • Options API
  • Composition API
  • Class API

個人的には、Class APIを利用したパターンが好きなのですが、Nuxt.js/Vue.jsをJavascriptベースで学習したメンバーやUIデザイナーが画面部分の実装をする場合などの学習コストが多いように感じています。初学者が多いからこそ、Typescriptを導入して安全な開発を行いたいと思うデベロッパーも多いと思います。弊社のサービス開発の中では、Options APIを利用することである程度、安全に開発が出来るようになったので、そのときに導入した流れを紹介したいと思います。

Nuxt TypeScript

Nuxt.js(Vue.js)にTypeScriptを導入する際には、Nuxt TypeScriptを参照すると良いです。Nuxt.js(Vue.js)に関しては、ドキュメントも豊富で、日本語への翻訳も活発に行われているので、英語が苦手なエンジニアさんも読みやすいと思います。こちらのサイトでもNuxtで利用するものに対すアプローチが紹介されています。

  • コンポーネント
  • ミドルウェア
  • プラグイン
  • ストア

ストアの実装方針は、クラスベースのモジュール、vuex-module-decoratorsを利用しています。デコレータを利用したパターンは、コードが見やすくて読みやすいと思いますが、
Nuxt.jsの公式ドキュメントをベースに学習したばかりにエンジニアにとっては、敷居が高いようです。そのため、今回は、nuxt-typed-vuexを利用するアプローチを取りました。

Nuxt Typed Vuex

こちらは、従来のstoreを利用した記載方法をある程度保った形で記載が可能です。導入自体も非常に簡単で、利用時に$accessorを利用することで、dispacherなどの型がわかりにくい部分でもTypescriptの恩恵を受けられます。以前、紹介した「Javascriptベースで作成したNuxtプロジェクトにTypescriptを導入する」で、Javascriptベースの状態からリファクタしてTypescriptを手っ取り早く導入したい場合にもいい気がします。

まとめ

Javascriptベースのプロジェクトでも比較的簡単にTypescriptを導入することが出来るので、導入をして型安全なプログラミングをしましょう!