Nuxt.js × TypeScript セットアップ

Prologue

Nuxt.jsとTypeScriptでプロジェクトを立ち上げるときに意外と設定することが多いため、設定をまとめました。
基本はDocument通りになるため、自身で設定する場合には都度公式を確認することをお勧めします。

• Nuxt.js
• Nuxt Typescript

2020/4/2 追記:
create-nuxt-app v2.15.0 : typescript-buildを使用したTSサポートがリリース
参考: https://github.com/nuxt/create-nuxt-app

内容の検証も追記しましたので、そちらを確認したい方はこちらからどうぞ

環境

• macOS: 10.15.2
• node.js: 10.16.0
• terminal: iTerm
• エディタ: VS Code
• パッケージマネージャ: yarn

Nuxt.jsをインストール

• Nuxt.jsをインストールします。
  今回プロジェクト名はsample-nuxtとしています。プロジェクトを作成したいディレクトリまで移動して以下のコマンドを実行します。

yarn create nuxt-app sample-nuxt 

• 実行結果
  *環境、設定内容によって一部異なります。

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in sample-nuxt
? Project name sample-nuxt
? Project description My hunky-dory Nuxt.js project
? Author name mi**
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools Prettier
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)

• インストールが成功しているか起動して確認
  プロジェクトのルートディレクトリまで移動して以下のコマンドを実行します。

yarn dev

TypeScriptを追加

*公式Documentに書いてある通りになるため、必要に応じてDocumentを確認してください。
参考: https://typescript.nuxtjs.org/ja/guide/

1. Nuxt TypeScriptのサポートを受けるために@nuxt/typescript-buildをインストール

yarn add -D @nuxt/typescript-build

2. nuxt.config.jsを修正

/*
** Nuxt.js dev-modules
*/
buildModules: [
  '@nuxt/typescript-build'
],

3. tsconfig.jsonの作成

参考: https://typescript.nuxtjs.org/ja/guide/setup.html#%E8%A8%AD%E5%AE%9A

{
  "compilerOptions": {
    "target": "es2018",
    "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"
  ]
}

4. vue-shim.d.tsの作成
Vueファイルの型を提供する宣言

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

5. TypeScriptで記述するファイルのscriptタグを変更

<script lang="ts">

</script>

ここでComponentをimportする箇所でエラーが起こった場合、拡張子等を確認してください。

Runtimeのインストール

参考: https://typescript.nuxtjs.org/ja/guide/runtime.html

1. @nuxt/typescript-runtimeのインストール

yarn add @nuxt/typescript-runtime

2. package.jsonの修正

scripts nuxt -> nuxt-ts に変更

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

Lintのインストール

参考: https://typescript.nuxtjs.org/ja/guide/lint.html

yarn add -D @nuxtjs/eslint-config-typescript

• .eslintrc.jsの作成

module.exports = {
    extends: [
        '@nuxtjs/eslint-config-typescript'
    ]
}

nuxt.config.tsを修正

1. 拡張子の変更
   nuxt.config.js -> nuxt.config.ts

2. コードの修正
   この時点で型を指定していない箇所にエラーが表示された場合適宜修正します。

例: エラー内容

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

以下のように修正

extend (config:any, ctx:any) {}

create-nuxt-app v2.15.0

typescript-buildを使用したTSサポートがリリースされました。
参考: https://github.com/nuxt/create-nuxt-app

設定内容は上記と変わらないためドキュメントを読みながら進めることをお勧めします。
ここでは差分のみ確認をしています。

プロジェクトの作成

プロジェクト名は sample-app としています。

yarn create nuxt-app sample-app

success Installed "create-nuxt-app@2.15.0" with binaries:
      - create-nuxt-app

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in sample-app
? Project name sample-app
? Project description My sweet Nuxt.js project
? Author name mi**
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules Axios
? Choose linting tools Prettier
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)

注目すべきは typescript の選択と @nuxt/typescript-runtime が増えているところ。
typescript の設定が楽になりました。

動作を確認

yarn dev

以下を参考にして、必要なモジュールとセットアップの確認をしていきます。

1. package.json で @nuxt/typescript-build と @nuxt/typescript-runtime がインストールされていることを確認
2. nuxt.config.js の buildModules に @nuxt/typescript-build が記載されていることを確認
3. tsconfig.json があるか確認

tsconfig.json の中身を公式ドキュメントと比較すると以下の項目が増えていましたが、特に問題はないためこのまま進めます。気になる方は調べてみてください。

"experimentalDecorators": true, //
... // 略
"exclude": [
    "node_modules",
    ".nuxt",  
    "dist"  
  ]

4. vue-shim.d.ts の追加

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

5. TypeScriptで記述するためComponent等のscriptをtsに変更

<script lang="ts">

6. package.json の scripts が nuxt-ts になっているか確認
7. nuxt.config.js を nuxt.config.ts に変更、 型指定をしてない箇所はエラーが出るため修正

---

以上です。設定周りが楽になった印象を受けました。
パッケージ周辺も現時点での新しいバージョンになっていたりするので、気になる方は細かい部分を見てみるのも楽しいと思います。
細かい設定は変わらないため、追記とさせていただきます。

---

Epilogue

Nuxt.jsもNuxtTypescriptも日本語のDocumentがあるため、そちらを確認するのが一番です。
ただ、始めるところが大変だと思うのでこちらが学習の一助となれば幸いです。

何か間違っている箇所があればご指摘ください。

###　課題
nuxt.config.tsの型追加は今回使用していないためついanyを使用してしまいました...
実際活用する際にはきちんと調べて、より良い方法があればこちらに追記します。