Nuxt v2.9 + Typescriptの環境構築

Nuxt2.9 + Typescript 環境構築の備忘録です。
執筆時のバージョンはNuxt2.9.2です。

2.8 => 2.9でTypescriptのインストール方法が異なるため、
調べて出てくるのが2.8以前の情報だったりで頭がバグりそうになったのでまとめます。

公式はこちら

はじめに

執筆中にこちらの記事とほぼ同じことに気づきました
むしろ本記事より丁寧ですので是非ご参考ください

作りたい環境

• SPAモード
• ESLint
• vue-property-decoratorによるクラスベース記法

Nuxt2.9について

Nuxt2.9以降では、以下のパッケージでTypescriptをサポートする

Nuxt Typescript

• @nuxt/typescript-build
  layouts、components、plugins、middlewaresでTypescriptを使用するためのNuxtモジュール
• @nuxt/typescript-runtime
  nuxt.configファイル、local modules、serverMiddlewaresのTypeScriptランタイムサポートを提供するNuxtラッパーバイナリ
• @nuxt/types
  型定義ファイル
  @nuxt/typescript-buildに梱包されているので個別でのインストールは不要

要は@nuxt/typescript-buildと@nuxt/typescript-runtimeを入れて設定をちょこちょこっとすればいいってことね。

手順

プロジェクトの作成

.bash

npx create-nuxt-app ts-test
# OR
yarn create nuxt-app ts-test

cd ./ts-test

SPAモードで、ESLintとPrettierを入れた

設定内容

• Project name
• Project description
• Author name
  • 任意
• Package manager
  • Npm
• UI framewoek
  • None
• Server framework
  • None
• Nuxt.js modules
  • Axios
  • PWA
• Linting tools
  • ESLiint
  • Prettier
• Test framework
  • None
• Rendering mode
  • Single Page App
• Development tools
  • jsconfig.json

セットアップ

基本的に公式を参考に進める

@nuxt/typescript-build

.bash

npm install --save-dev @nuxt/typescript-build
# OR
yarn add --dev @nuxt/typescript-build

nuxt.config.jsのbuildModulesに以下を記述。
今回ESLintを入れているのでこんな感じ。

nuxt.config.js

export default {
  // 中略
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build'
  ],
  // 中略
}

tsconfig.jsonを公式のとおり作成。
typesを見ると@nuxt/typesが参照されているのが分かる。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

@nuxt/typescript-runtime

.bash

npm install @nuxt/typescript-runtime
# OR
yarn add @nuxt/typescript-runtime

package.jsonのscriptsを、nuxt => nuxt-tsに書き換える。

package.json

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

nuxt.config.js => nuxt.config.tsに変更。
tsファイルにすると、extend(config, ctx) {}の部分が暗黙的anyで怒られた。

Parameter 'config' implicitly has an 'any' type.
Parameter 'ctx' implicitly has an 'any' type.

以下のように明示してあげるか、
もしくは、不要であればextend~~部分をコメントアウトしても可。

nuxt.config.ts.diff

  build: {
    /*
     ** You can extend webpack config here
     */
-    extend(config, ctx) {}
+    extend(config: any, ctx: any) {}
  }

つづけて、nuxt.config.tsに以下を追加

nuxt.config.ts

  typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
  }

vue-property-decorator

.bash

npm install --save-dev vue-property-decorator
# OR
yarn add --dev vue-property-decorator

tsconfig.jsonにexperimentalDecoratorsを追加

tsconfig.json.diff

{
  "compilerOptions": {
+   "experimentalDecorators": true,
  }
}

@nuxtjs/eslint-config-typescript

すでに@nuxtjs/eslint-configがインストールされていたら、これはアンインストールする
（@nuxtjs/eslint-config-typescriptに含まれてる）

.bash

npm uninstall @nuxtjs/eslint-config
# OR
yarn remove @nuxtjs/eslint-config

.bash

npm i -D @nuxtjs/eslint-config-typescript
# OR
yarn add -D @nuxtjs/eslint-config-typescript

package.jsonのscriptsの、lintを修正

package.json.diff

  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  }

.eslintrc.jsを修正
parserをbabel-eslint => @typescript-eslint/parserにする必要があるが、
これは@nuxtjs/eslint-config-typescriptの構成に入っているので記述不要（なはず）
extendsの@nuxtjsも同様の理由で削除

.eslintrc.js.diff

  parserOptions: {
-   parser: 'babel-eslint'
  },
  extends: [
-   '@nuxtjs',
+   '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],

動作確認

Logo.vueとindex.vueのscript部分をtypescriptに書き換える

Logo.vue

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Logo extends Vue {}
</script>

index.vue

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: {
    Logo
  }
})
export default class IndexPage extends Vue {}
</script>

うごいた～～

一応躓いたエラーまとめ

躓き1

Module parse failed: Unexpected character '@' 以下略

=>
package.jsonのscriptsを、nuxt => nuxt-tsに書き換え

躓き2

Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

=>
ESLintのパーサがbabel-eslintのままだった

参考

• https://typescript.nuxtjs.org/
• https://qiita.com/tomopict/items/ced60c44203852faca0a
• https://webneko.dev/posts/update-to-nuxt2-9-in-webneko-blog