Nuxt v2.9 + Typescriptの環境構築

17690 ワード
TypeScript 備忘録 Vue.js nuxt.js ESLint 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を入れて設定をちょこちょこっとすればいいってことね。

手順

プロジェクトの作成

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

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

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

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に含まれてる）

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

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のままだった

参考