[Nuxt.js 2.5.0] 既存のNuxtプロジェクトをTypeScript対応にする

Nuxt.jsの2.5.1がリリースされました。
今回のリリースでTypeScript対応がさらに強化され、nuxt-tsに依存せず、
NuxtだけでTypeScriptが簡単に使えるようになりました。
早速、既存プロジェクトにTypeScriptを導入してみたので、備忘録としてまとめます。

1. Nuxtのアップデート

Nuxtを最新版にします
さらに依存モジュールもすべてアップデートしたいので、node_moduleを全削除し再インストールします。
この時、packageのインストールバージョンを管理しているyarn.lockも一緒に削除してください。

// packageの削除
$ rm -rf node_modules/
// yarn.lockの削除
$ rm yarn.lock
// 再インストール
$ yarn

インストール完了後、yarn.lockを確認し、nuxtのバージョンが2.5.0以上になっていればOKです。

yarn.lock

"@nuxt/babel-preset-app@2.5.1":
  version "2.5.1"

2. typescript対応モジュールの追加

nuxtをTypeScriptに対応させるため、モジュールを追加します。
vue-property-decoratorは@Propや@EmitなどVue対応の便利なデコレータを使用するためのものです。

$ yarn add -D @nuxt/typescript
$ yarn add vue-property-decorator 

3. tsconfig.jsonの追加

typescriptのコンパイル時の設定ファイルとなるtsconfig.jsonを追加します。
2.4.0以前は、こちらも自分で追記しなくてはならなかったのですが、2.5.0以降では初回起動時に自動で追記されます。
親切すぎる！

$ echo "{}" > tsconfig.json

4. ESLintのTypeScript対応

私の環境だとESLintがTypeScriptのデコレータに対応せず、落ちてしまいました。
なのでESlintをTypeScript対応に修正します。

まず、moduleの追加

$ yarn add -D @typescript-eslint/parser

続いてeslint.jsの修正

.eslint.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  // ここから追加
  parserOptions: {
    ecmaVersion: true,
    parser: "@typescript-eslint/parser",
    ecmaFeatures: {
      legacyDecorators: true
    }
  },
  // ここまで
  "extends": ['vue', 'plugin:vue/recommended'],
  plugins: [
    'vue',
    'pug'
  ],
  // add your custom rules here
  rules: {}
}

5. TypeScrupt化

ここまでで準備完了です。
あとは既存の.Vueファイルをlang="ts"で記述してみましょう。

変更前のファイル

AppH1.vue

<template lang="pug">
  h1.mincho {{ headText }}
    span {{ headSubText }}
</template>

<script>
export default {
  name: 'AppH1',
  props: {
    headText: { type: String, require: true, default: '' },
    headSubText: { type: String, require: true, default: '' }
  }
}
</script>

TS化

AppH1.vue

<template lang="pug">
  h1.mincho {{ headText }}
    span {{ headSubText }}
</template>

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

@Component
export default class AppH1 extends Vue {
  @Prop({
    default: ''
  })
  headText!: string;

  @Prop({
    default: ''
  })
  headSubText!: string
}

</script>

早速起動してみましょう。
ちなみにnuxt 2.5.0以降 -o オプションをつけると起動画面でカッコいいLoadingが走ります。

$ yarn run dev -o

これで完了です！！
あとはひたすら既存.vueファイルをlang="ts"に変更するのみ！