Typescriptの利用

NuxtでTypescriptを利用しようとして調べたところ、2019/01/28のv2.4.0で公式対応された手順での利用方法があまりまとまっていなかったので、簡単にまとめてみました。 https://ja.nuxtjs.org/guide/typescript にアクセスしたら404エラー！ということで簡単に手順をまとめました。(2019/04/18時点。そのうちこちらも404エラーではなくなるでしょう。)

まず、Typescriptを利用できるようにライブラリを追加します。npm/yarnの環境にあわせて実行してください。

npm i -D @nuxt/typescript
npm i ts-node
# OR
yarn add -D @nuxt/typescript
yarn add ts-node

nuxt/typescriptはコンパイルや型チェックを別プロセスで実行するために必要です。 ts-nodeは、nuxt.config.tsとserverMiddlewaresにランタイム時のTypescriptのサポートをするために必要です。

また、空のtsconfig.jsonファイルがプロジェクトのルートディレクトリに必要です。この空のファイルは最初にnuxtコマンドを実行した時に自動でデフォルト値によってアップデートされます。

touch tsconfig.json
yarn dev
> yarn run v1.13.0
> $ nuxt --port 3333
> 08:53:55 ℹ Generating /tsconfig.json <-- ここで生成されています。

typescriptを利用する際には、vue-property-decoratorとvue-class-componentの利用が推奨されています。 tsconfig.jsonの初期値にも、"experimentalDecorators": trueが入っていますね。

また、ESLintを使いたい場合は、追加でプラグインの導入が必要です。

npm install -D @typescript-eslint/eslint-plugin
# OR
yarn add -D @typescript-eslint/eslint-plugin

その後、.eslintrc.jsへの設定追加とlintコマンドのセットアップを行います。 .eslintrc.jsに以下の設定を追加する必要があります。plugins/parserOptions.parser/extends/rulesのキーはすでに存在すると思うので、コピペではなくそれぞれ手入力で追加してください。

module.exports = {
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    '@nuxtjs'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error'
  }
}

lintコマンドのセットアップはpackage.jsonのscriptsに以下を追加してください。ここでは.gitignoreを追加することでnode_modulesや.nuxtがlintの対象から外れるようにしています。

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

これでlintをかけるときはnpm run lint/yarn lintで実行できるようになりました。