最近は少しずつではあるもののTypeScriptを使うようになってきました。まだ緩い感じで使っているのですが、今回はNuxt.jsで作成するプロジェクトでTypeScriptを導入することになり、備忘録として残しておきたいと思います。ちなみに今回はVueの2系で進めていく前提となっています。（次のバージョンであるVueの3系をベースにしたものは改めてまとめていきたいと思います）   まずは通常のNuxt.jsのプロジェクトを作成していきます。npmで下記のようにインストールを始めていきます。

$ npx create-nuxt-app PROJECT_NAME

  いつも通り対話式のフローを進めていきます。基本的には必要に応じて選択肢を決めていきますが、今回はTypeScriptを使うということですので「Choose programming language」に対しては「TypeScript」を選んでおきます。

? Project name PROJECT_NAME
? Project description PROJECT_DESCRIPTION
? Author name AUTHOR_NAME
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint, Prettier, StyleLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json

  これでTypeScriptを使うNuxt.jsのプロジェクトファイル一式がインストールされました。続いて、TypeScriptを使うために必要なモジュールを追加でインストールしていきます。

$ yarn add --dev @nuxt/typescript-build @nuxt/types @nuxtjs/eslint-config-typescript

  そして設定ファイルである「nuxt.config.js」ファイルですが、「buildModules」に先ほどのモジュールを下記のように追加しておきます。こちらもTypeScriptで記述する場合には型付けが必要になります。 【nuxt.config.ts】

export default {
  ......
  buildModules: ['@nuxt/typescript-build']
  ......
  build: {
    extend(config: any, ctx: any) {}
  }
  ......
}

  続いて、TypeScriptの設定ファイルを編集していきます。下記は一例になりますのでプロジェクトに応じて適宜調整は行なっていきます。特にソースファイルのディレクトリを変更する場合には「baseUrl」や「paths」を変更しないとルートパスで指定した時にエラーが発生します。 【tsconfig.json】

{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

  次は.vueの拡張子をもつファイルを扱うための設定を行っていきます。下記の通りプロジェクトのルートディレクトリ直下にファイルを作成し次のように指定を行っていきます。 【vue-shim.d.ts】

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

  そしてESLintの設定ファイルも編集していきます。先ほどインストールしたモジュールを継承するようにして、TypeScriptに対応させていきます。 【.eslint.js】

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

  合わせてpackage.jsonに記載しているlint用のコマンドスクリプトもTypeScriptに対応させるべく更新しておきます。 【package.json】

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

  ちなみに.eslint.jsの設定ファイルでTypeScript用のルールを書く場合には下記のように指定します。 【.eslint.js】

module.exports = {
  .....
  extends: [
    '@nuxtjs/eslint-config-typescript',
    .....
  ],
  .....
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "warn" // TypeScript用に追加
  }
}

  これでNuxt.jsのプロジェクトでTypeScriptを使う準備が整いました。実際にローカルサーバーでプロジェクトを起動させてチェックしてみて問題がなければOKですね。コンポーネントファイルなどでTypeScriptを使う場合には下記のように「lang="ts"」と指定してあげると使えるようになります。

<script lang="ts">
  export default {
    ......
  }
</script>

 

VuexのTypeScript対応

TypeScriptでVuexを使う場合には別のモジュールが必要となります。いくつかあるようですが今回は公式でも紹介されている「vuex-module-decorators」というものを使う方法を試してみます。下記コマンドでモジュールをインストールしていきます。

$ yarn add vuex-module-decorators

  これでクラスベースでstore内のファイルを書けるようになり、MutationやActionなどの処理はデコレーターを使って記述していきます。詳しくはまた改めて別の記事にてまとめていきたいと思います。   また、一応デフォルトでも基本的な型がVuexにも用意されているようで、下記のように進めていくことも可能です。この形ですと、TypeScriptを使わない場合とあまり変わらない書き方で使うことができます。 【store/index.ts】

import { GetterTree, ActionTree, MutationTree } from 'vuex'

export type RootState = ReturnType<typeof state>

export const state = () => ({
  currentPageName: '',
})

export const mutations: MutationTree<RootState> = {
  setCurrentPageName: (state, page: string) => state.currentPageName = page
}

export const actions: ActionTree<RootState, RootState> = {
  updateCurrentPageName: ({ commit }, page: string) => commit('setCurrentPageName', page)
}

export const getters: GetterTree<RootState, RootState> = {
  getCurrentPageName: state => state.currentPageName
}

 

クラスベースのTypeScript対応

Nuxt.jsに限らず、Vue.jsではTypeScriptを使う場合、コンポーネントでのスクリプトやVueインスタンスの書き方が少し異なります。Vueの2系ですとVueのインスタンスを拡張する「Options API」を使う方法と、クラスベースで記述していく「Class API」を使う方法があります。Options APIの場合には特に追加のコンポーネントは必要ありませんが、Class APIで進める場合には下記のコマンドで追加のモジュールをインストールする必要があります。ただしVue.jsの場合とNuxt.jsでモジュールが異なるので注意しておきます。

（Vue.jsの場合）
$ yarn add vue-property-decorator vue-class-component

（Nuxt.jsの場合）
$ yarn add nuxt-property-decorator nuxt-class-component

  そして下記のモジュールも合わせてインストールしていき、Nuxt.jsの設定ファイルに追記していきます。

$ yarn add --dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

  これらのモジュールは下記のように指定しますが、追記する順番が重要とのことで、逆の場合にはエラーになることもあるようです。 【nuxt.config.ts】

export default {
  .....
  build: {
    .....
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    },
    .....
  }
  .....
}

  ちなみに、Options APIの場合はほとんど同じように記述できますが、Class APIの場合は大きく記述方法が変わります。この点については別途改めて記事にまとめていきたいと思います。手軽にTypeScriptを試す場合にはOptions APIの方が進めやすいようですが、私は型付けのエラーがたくさん出たりしたのでClass APIの方が扱いやすい印象でした、、   あとは、プロジェクトに合わせて必要なモジュールを追加していきます。この辺りはTypeScriptの使用有無とは関係ないですね。

$ yarn add @nuxtjs/axios
$ yarn add @nuxtjs/proxy
$ yarn add @nuxtjs/sitemap
$ yarn add @nuxtjs/google-adsense
$ yarn add @nuxtjs/google-analytics
$ yarn add cookie-universal-nuxt
$ yarn add cross-env
$ yarn add --dev pug pug-plain-loader
$ yarn add --dev sass sass-loader fibers
$ yarn add --dev @nuxtjs/style-resources
.....

  今回はVue2系のNuxt.jsでTypeScriptを導入する環境構築についてまとめてみました。実際にコンポーネントや処理を作成する場合には色々と違いはたくさんありますが、その点については別途改めて記事にまとめていきたいと思います。   （参考にさせて頂いたサイト） Nuxt.js 向け TypeScript サポート