Nuxt.js TypeScript - 実践TypeScript アップデート - #TypeScript

今年6月に、実践TypeScript という書籍で、Nuxt.js に TypeScript を導入する方法を執筆させて頂きました。「書籍で扱っている Nuxt.js のバージョンが少し古いけど、今現在はどうするのが良いの？」という読者の方から寄せられた疑問に、アップデートとして私的見解をここにまとめました。（といっても、すでに日本語の良記事で紹介されている内容と変わりなく、n番煎じですmm）

typescript.nuxtjs.org

少し日が経ちましたが、Nuxt.js の公式TypeScript導入ガイドが公開されています。このガイドは、最新の Nuxt 2.10 以降向けとして書かれています。更新が目的であれば、Migration from Nuxt 2.8 を必ず確認するようにしましょう。

custom server framework で異なる型定義

基本的に公式TypeScript導入ガイドに準拠します。しかしながらここでは、「custom server framework を選択していない・選択している」という観点が考慮されていません。書籍で Nuxt.js の型定義に触れているところは、次の２節です。この二つは「custom server framework を選択していない・選択している」という、大きな違いがあります。

11章1節「TypeScript ではじめる Nuxt.js」
11章3節「Nuxt.js と Express」

Nuxt.js のアップデートに伴い、前者に大きな変化がありました。読み進めるにあたり、どちらのユースケースを想定しているのか、まず確認してください。本記事は主に、執筆時点で v2.7.1 であった前者に対し言及しています。

Introduction

Nuxt.js 関連の型定義は次の3つのパッケージに分割・外部化され、Nuxt 2.9以降のコアから削除されました。

@nuxt/types
@nuxt/typescript-build
@nuxt/typescript-runtime

必須になるのは@nuxt/typescript-buildです。@nuxt/typescript-runtimeは後述する nuxt-ts の利用有無に伴い、必要に応じてインストールすることになります。@nuxt/typesはどちらにも含まれるため、直接のインストールは不要です。

Setup

基本的に必要になることは書いてあるとおりです。順番に書いてある通りで問題なく設定できるかと思います。

Installation：@nuxt/typescript-buildのインストール
Configuration：nuxt.config.jsに追記。tsconfig.jsonを作成。

Runtime (optional)

@nuxt/typescript-runtimeはts-nodeを内包しており、ラッパーであるnuxt-tsを提供しています。そのためこのパッケージは、dependencies に追加する様に注意しましょう。これを利用すると、設定の煩雑さが軽減され、以降の migration コスト軽減が期待できます。

custom server framework を選択していない場合、ビルトインサーバーが利用されます。modulesやserverMiddlewaresの型定義はModules (Runtime) や Server Middlewares (Runtime)のように、内包されている@nuxt/typesから提供される型で事足ります。

nuxt-ts 使う？使わない？

custom server framework を選択していないのであれば、@nuxt/typescript-runtimeが提供するnuxt-tsは利用した方が手早く環境構築できると思います。書籍の11章1節「TypeScript ではじめる Nuxt.js」に書かれている環境構築方法は、nuxt-tsを利用する方法に移行することをお薦めします。

Components

Component の Props 型安全を実現するため、書籍ではPropType型を利用する型情報付与を紹介しています。公式ガイドの様に、PropOptions型でアサーションを付与する方法には触れていませんが、こちらの様に記述することも可能です。ユースケースに併せて選択してください。

export default Vue.extend({
 props: {
    user: {
      type: Object,
      required: true
    } as PropOptions<User>
  }
})

Store

Store に関しては「Vuex をそもそも利用しない」という選択もありますが、必要なシーンが出た場合には、参考にしてみてください。

[Class-based]

vuex-class-componentは、デコレータでモジュールを定義するアプローチです。Nuxtとの完全な互換性はまだありませんが、新しいAPIをリリースしたそうです。

Vanilla

通常の JavaScript で記述する様な Vuex Store 定義に対し、型定義を付与する方法です。書籍の11章2節で紹介している通り、より型安全にするための余地があります。vuex-guardian は Vanilla での記述をサポートする型生成ツールで、こちらを利用すると、書籍に記されているよりも簡単に型情報の付与を行うことができます。

Configuration

nuxt.config.ts 向けの型定義です。nuxt.config を TS で書く場合に利用します。

nuxt.config.ts

import { Configuration } from '@nuxt/types'
const config: Configuration = {
  mode: 'universal',
  head: {}
  ...
}
export default config

Middlewares

custom server framework でExpressなどのフレームワークを選択している場合、11章3節で紹介している様に、手詰まりになるケースが想定されます。@nuxt/types/app/index.d.ts を拡張するなど、型定義強化の余地があります。

ServerMiddleware

custom server framework でExpressなどのフレームワークを選択している場合、@nuxt/types で提供されている ServerMiddleware型は利用せず Express など外部モジュールから import した型を利用した方が良さそうです。Express サーバーの RouteHandler 相当をここに記述することになるためです。

免責事項

Lint、Plugin や Modules など、書籍で触れられなかった項目についても typescript.nuxtjs.org では言及されています。これらは書籍内容更新という観点からはそれるため割愛させていただいています。ご了承ください。