Nuxtでデコレーターを使わずTypeScriptを書いてみた

こんにちわ、ななきです。

だいぶ前にVueをTypeScript化した的な記事書いたのですが、それから案件でもTS化したVueを使っていたのと最近の界隈の流れもありNuxtもTypeScript化してみました。

結果的にデコレータを使わずに、vuexもコンポーネントも型が効いており満足です。

ちなみにvuex部分にかんしてはこちらのリポジトリを参考にさせて頂きました。

コンポーネントのTS化

コンポーネントに関してはびっくりするほどやることないです。

これだけです、あとはコンポーネント内で以下の様に書いて行けばいいだけです。

最初のうちはめんどくさいtsconfigすらもbuild時に記述してくれるのですごいです。

そしてTS化すると気になるのがlintですよね。

Nuxtのeslintは優秀なので可能な限りそのまま使いたいので以下の様に拡張します。

これでeslintでもTSをパースできる様になりました。

とても簡単です。

vuexのTS化

こちらに関しては冒頭で紹介したリポジトリの/types/vuexを使わせてもらいました。

その上でコンポーネント内でも型を効かせたいが、デコレーターは使いたくなかったのでプラグインを作成しました。

今度はこのプラグインを注入します。

これでコンポーネント内で下記の様にstoreのオブジェクトへアクセスできるようになります。

なぜわざわざプラグインを作ったのかは $store が $store: Vuex.Store<any>で固定されており書き換えが出来なかったためです。

ですので型定義ファイルに下記の追加をしていきます。

こうすることでcontextを参照できる場所でのvuexの型が効くようになりました。

まとめ

コンポーネントだけであれば簡単にTS化できるので軽い気持ちで触ってみるのもいいと思います。

ただvuexの型が効くとほんとに世界変わるので是非慣れてきたら使ってみてください。

Archives

MasatoChiba
Frontend Developer