Nuxt.js 2.9でのTypeScript対応

Nuxt.js v2.9がリリースされました

Nuxt v2.9.0 is out 🥳
- Typescript support now externalised (https://t.co/AlvY55s0cC)
- Vue Meta upgraded to v2.0
- 10+ bug fixes 🐞
- 10+ new features 🚀https://t.co/vEfQoUWh8l pic.twitter.com/qwmSsEfkxJ

— Nuxt.js (@nuxt_js) August 20, 2019

TSの対応方法がそれまでと大きく変わっているので、以前の記事からの差分をのせていこうと思います。

オフィシャルの手順は以下になります。
Migration from Nuxt 2.8 | Nuxt TypeScript

Runtime

前述の移行手順とは順序が異なりますが、以前の記事でnuxt.config.tsを使っているため、Runtimeを先にインストールします。

$ yarn add @nuxt/typescript-runtime

NuxtのTS回りのNPMがいくつかに分解されました。
そのうち、@nuxt/typescript-runtimeはNode環境でTSを処理するためのものです。
具体的にはnuxt.configやserverMiddlewaresでTSを使いたいときに必要になります。
ちなみに@nuxt/typescript-runtimeはProduction環境(NODE_ENV=production)でも必要になるので、dependenciesに追加する必要があります。
(nuxt-ts startで使用するので)

また一連のnuxtコマンドをnuxt-tsにしてあげる必要があります。

package.json

   "private": true,
   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
   },

一周回ってv2.5に戻った感じですねｗ

@nuxt/typescript-buildのinstall

nuxt buildでTSを扱うためのものが@nuxt/typescript-buildです。
@nuxt/typescriptは@nuxt/typescript-buildに含まれるようになったので直接の依存は不要になります。

$ yarn remove @nuxt/typescript
$ yarn add -D @nuxt/typescript-build

@nuxt/typescript-buildはnuxt buildなどで使うだけなのでRuntimeとは違い、devDependenciesとして追加します。
@nuxt/typescriptがRuntimeとに分離されて使いやすくなった感じですね。

またnuxt.config.ts内のConfigurationの型定義が@nuxt/typesからExportされるようになりました。

nuxt.config.ts

-import NuxtConfiguration from '@nuxt/config'
+import {Configuration} from '@nuxt/types'

-const nuxtConfig: NuxtConfiguration = {
+const nuxtConfig: Configuration = {
+  buildModules: ['@nuxt/typescript-build'],
...    
}

module.exports = nuxtConfig

またv2.9で追加されたbuildModulesに@nuxt/typescript-buildを指定しています。
buildModulesにすることでbuildのみ(generateも)で使用するmoduleをdevDependenciesに指定できるようになりました。

tsconfig.jsonの更新

tsconfig.jsonのtypesに@nuxt/vue-appを指定していましたが、@nuxt/vue-appはなくなったので代わりに@nuxt/typesを使う必要があります。

tsconfig.json

     },
     "types": [
       "@types/node",
-      "@nuxt/vue-app"
+      "@nuxt/types"
     ]
   }
 }

@nuxt/typesが@nuxt/vue-appと@nuxt/configとを置き換える形ですね。