Edited at

Nuxt.js 2.9でのTypeScript対応

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


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.configserverMiddlewaresで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に戻った感じですねw


@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-buildnuxt 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.jsontypes@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とを置き換える形ですね。