Nuxt.jsが2.9になってからTypeScriptの対応が変わったようです。

どうも、靖宗です。
一生環境構築してる気がします。フロントもう嫌や・・・
ということでTypeScriptの対応がなにやら変わった？ようなので公式に沿ってセットアップしてみます。

Nuxtプロジェクトのセットアップ

ここに関してはいつも通りです。
よければ以前の記事をどうぞ。

TypeScriptのセットアップ

公式サイトのSetupに沿って進めます。
まずは必要なパッケージのインストールをyarnで行います。

yarn add -D @nuxt/typescript-build @nuxt/types

コンフィグファイルnuxt.config.js編集

コンフィグファイルを編集します。

buildModulesという項目に@nuxt/typescript-buildを追加します。

...
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
...

tsconfig.jsonの追加

tsconfig.jsonを追加します。
一応tscコマンドで追加しますが普通に作成して大丈夫だと思います。

tsc --init

一応ここまでの設定で動作はするようです。

nuxt.configをtsにする

これもうjsのままの方がええんでない？って気もしてきましたが、一応対応します。

必要パッケージのインストール

nuxt.configをtsにする場合はnode環境にもTypeScript対応が求められますので@nuxt/typescript-runtimeが必要になります。
yarnで追加していきますが、-Dではなく普通に依存関係に追加するようです。

yarn add @nuxt/typescript-runtime

package.jsonの編集

yarn devの実行をnuxtからnuxt-tsに変更します。

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

以上でNuxt.jsでTypeScriptを利用できるようになるみたいです。
煩雑なパッケージ関係が整理された感じではありますが、ちょっと手間が増えた感もありますね。
そのうちnuxtのウィザードに追加されそうな気はします。

ついでにLintにも対応する

つまり以前の記事はもう古い。もうしわけないです・・・

パッケージのインストール

これも必要なパッケージがあるのでインストールします。

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

.eslintrc.jsを編集

.eslintrc.jsに先ほどのパッケージ情報を追加していきます。

...
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
...

Prettier周りでたまに前後関係が効いてくる場合があるので念のため、Prettierよりは前に追加しました。

package.jsonを編集

package.jsonにlintのコマンドが記載されていますので、それを編集しておきます。といっても.tsを付け加えるだけですが。

...
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
...

試しにyarn lintを実行するとnuxt.config.tsがチェックされているのが分かります。

parserの変更

parserがbabel-eslintのままだと色々ESLintに怒られる時があります。なのでparserを@typescript-eslint/parserに変更しておきます。
まずは必要なパッケージをインストールします。

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.jsを編集

parser: 'babel-eslint'

を消去して

  parserOptions: {
    parser: '@typescript-eslint/parser'
  },

を追記します。また、pluginsに'@typescript-eslint'を追加しておきます。

vueファイルなどにも対応

vueファイルではscriptタグにlang属性を付与することでTypeScriptとしてvueファイルのスクリプトを記載することができます。
ですが、lang="ts"を付けるだけではCannot find moduleとか怒られるのでその辺を対応します。

本当はtsconfig.jsonにincludeオプションを利用することで解決できるかと考えていましたが、どうにも解決しませんでしたので

qiita.com

こちらを参考にして、srcディレクトリにshims-vue.d.tsを作成し、tsconfig.jsonにfileを追加することで対応しました。
これでたぶんnuxt開発ができる筈！

参考

qiita.com

qiita.com

qiita.com