Nuxt.js + TypeScriptでの環境構築と作業の進め方まとめ |

(この記事は2019年7月に執筆しました。)
こんにちは、mabuiです。
5月から参画して、1人で実装を進めていたNext.js + TypeScriptのプロジェクトがリリース手前まで進んだので、プロジェクトをこなした上で身についた知見を数回に分けて共有していきます。

初回の今回はNuxt.jsのプロジェクトへのTypeScriptの導入方法から、コンポーネントでの型の扱い方、TypeScriptの書き方まで、この記事を通して自走してプロジェクトを進めれるようになることを目標に書いていきます。

Nuxt.jsのTypeScriptサポートは2019年7月現在、絶賛進行中のため、頻繁に更新されるNuxt.jsのバージョンによって方法が変わるため、作業を行う場合は公式の更新情報も参考にしてください。 https://ja.nuxtjs.org/guide/release-notes/
この記事ではv2.8.1で説明を進めていきます。

今回説明に使用したコードはこちらのリポジトリに置いています。
mabuix/nuxt_template

プロジェクトの作成・初期設定

まずはnext公式の足場ツールでプロジェクトを作成します。

yarn create nuxt-app nuxt_template

1 2	yarn create nuxt-app nuxt_template

対話式になるのでEnterで選択していきます。
Nuxt.js modulesとlinting toolsはspaceで両方選択します。

? Choose Nuxt.js modules
 ◉ Axios
❯◉ Progressive Web App (PWA) Support

? Choose linting tools
 ◉ ESLint
❯◉ Prettier

? Choose Nuxt.js modules

◉ Axios

❯◉ Progressive Web App (PWA) Support

? Choose linting tools

◉ ESLint

❯◉ Prettier

下記が選択内容です。

✨  Generating Nuxt.js project in /Users/mabui/git/nuxt_template
? Project name nuxt_template
? Project description My Nuxt.js template project
? Author name mabui
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)

✨ Generating Nuxt.js project in /Users/mabui/git/nuxt_template

? Project name nuxt_template

? Project description My Nuxt.js template project

? Author name mabui

? Choose the package manager Yarn

? Choose UI framework None

? Choose custom server framework None (Recommended)

? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support

? Choose linting tools ESLint, Prettier

? Choose test framework Jest

? Choose rendering mode Universal (SSR)

全て選択してダウンロードが終われば、プロジェクト作成完了です。

  Successfully created project nuxt_template

  To get started:

        cd nuxt_template
        yarn dev

  To build & start for production:

        cd nuxt_template
        yarn build
        yarn start

  To test:

        cd nuxt_template
        yarn test

✨  Done in 305.43s.

Successfully created project nuxt_template

To get started:

cd nuxt_template

yarn dev

To build & start for production:

cd nuxt_template

yarn build

yarn start

To test:

cd nuxt_template

yarn test

✨ Done in 305.43s.

作成したプロジェクトディレクトリ配下でyarn devコマンドでアプリを起動して、http://localhost:3000にアクセスできます。

次に作成されたnuxtの作業ディレクトリをsrc配下にまとめる設定を行います。
後々プロジェクトが膨らんでくると大変になるので、今のうちにやっておきましょう。

% pwd
/Users/mabui/git/nuxt_template
% mkdir src
% mv assets components layouts middleware pages plugins static store test src

% pwd

/Users/mabui/git/nuxt_template

% mkdir src

% mv assets components layouts middleware pages plugins static store test src

nuxt.config.jsにsrcDirを追加します。

export default {
  mode: 'universal',
  srcDir: 'src/',  // 追加
...

export default {

mode: 'universal',

srcDir: 'src/', // 追加

...

これでアプリ起動時に先ほどと同じようにアクセスできるようになります。

Jestを導入している場合、jest.config.jsのパスも変更しておきましょう。

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',  // 変更
    '^~/(.*)$': '<rootDir>/src/$1',  // 変更
    '^vue$': 'vue/dist/vue.common.js'
  },
...
  'collectCoverage': true,
  'collectCoverageFrom': [
    '<rootDir>/src/components/**/*.vue',  // 変更
    '<rootDir>/src/pages/**/*.vue'  // 変更
  ]
}

module.exports = {

moduleNameMapper: {

'^@/(.*)$': '<rootDir>/src/$1', // 変更

'^~/(.*)$': '<rootDir>/src/$1', // 変更

'^vue$': 'vue/dist/vue.common.js'

...

'collectCoverage': true,

'collectCoverageFrom': [

'<rootDir>/src/components/**/*.vue', // 変更

'<rootDir>/src/pages/**/*.vue' // 変更

]

}

これで、yarn testでテストが成功し、カバレッジも取得できる状態になります。

ではここからTypeScript用の設定を行なっていきます。

TypeScriptの導入

インストール

初めに必要なパッケージをインストールします。

yarn add -D @nuxt/typescript
yarn add ts-node

yarn add -D @nuxt/typescript

yarn add ts-node

次に必要なファイルを作成します。ファイルの中身はアプリ起動時に自動生成されます。

touch tsconfig.json

1 2	touch tsconfig.json

設定ファイル変更

次に設定ファイルであるnuxt.config.jsをTypeScript化します。
ファイル名をnuxt.config.tsにリネームし、内容を下記に書き換えます。

nuxt.config.js

export default {
  mode: 'universal',
  srcDir: 'src/',
  ...
}

export default {

mode: 'universal',

srcDir: 'src/',

...

}

↓

nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  mode: 'universal',
  srcDir: 'src/',
  ...
}

export default config

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {

mode: 'universal',

srcDir: 'src/',

...

}

export default config

コンポーネント変更

ではpages/index.vueコンポーネントをTypeScriptに変更していきます。
2019.7現在、公式でのTypeScript サポートページではvue-property-decorator を使用したクラススタイルでの記述を推奨していますが、予定されていたVueのv3.0でのクラススタイルサポートが諦められて、今後非推奨になる可能性があるため、もう一方のVue.extendを使用した記述を行います。

<template>
...
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

<style>
...
</style>

...

</template>

import Logo from '~/components/Logo.vue'

export default {

components: {

Logo

}

</script>

<style>

...

</style>

↓

<template>
...
</template>

<script lang="ts">
import Vue from 'vue'
import Logo from '~/components/Logo.vue'

export default Vue.extend({
  components: {
    Logo
  }
})
</script>

<style>
...
</style>

...

</template>

import Vue from 'vue'

import Logo from '~/components/Logo.vue'

export default Vue.extend({

components: {

Logo

}

})

</script>

<style>

...

</style>

Scriptタグの言語をtsに変更し、Vueのインスタンスをimportしてextendメソッドでラップするだけで単一ファイルコンポーネント内での型補完が効くようになります。

yarn devで起動させてみるとエラーになりました。

 ERROR  ERROR in /Users/manatonakane/git/nuxt_template/src/pages/index.vue                                                                                                                                                  12:37:38
33:18 Cannot find module '~/components/Logo.vue'.
    31 | <script lang="ts">
    32 | import Vue from 'vue'
  > 33 | import Logo from '~/components/Logo.vue'
       |                  ^
    34 | 
    35 | export default Vue.extend({
    36 |   components: {

ERROR ERROR in /Users/manatonakane/git/nuxt_template/src/pages/index.vue 12:37:38

33:18 Cannot find module '~/components/Logo.vue'.

31 | <script lang="ts">

32 | import Vue from 'vue'

> 33 | import Logo from '~/components/Logo.vue'

| ^

34 |

35 | export default Vue.extend({

36 | components: {

TypeScriptでモジュールの捜索ができていないようなので、vue拡張子ファイルを認識するよう、TypeScriptの型拡張ファイルをsrc配下に作ります。名前は最後が.d.tsで終わっていれば何でもいいです。
src/shims-vue.d.ts

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

declare module '*.vue' {

import Vue from 'vue'

export default Vue

}

これでエラー解消されました。

さらにvue-routerのように、型定義が不足していてエラーが発生する場合は自前で下記のように定義することが可能です。
mixinで自作したメソッドなんかもこのように定義できます。

import Router from 'vue-router'

declare module 'vue/types/vue' {
  interface Vue {
    $ua: {
      isFromPc: () => boolean
    },
    $router: Router,
    mixinMethod: () => void
  }
}

import Router from 'vue-router'

declare module 'vue/types/vue' {

interface Vue {

$ua: {

isFromPc: () => boolean

$router: Router,

mixinMethod: () => void

}

ESLintの設定

まずtypescript用のパッケージをインストールします。

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

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

.eslintc.jsファイルのpluginsに@typescript-eslint'を追加し、parserを@typescript-eslint/parserに変更します。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
    'prettier',
    '@typescript-eslint'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error'
  }
}

module.exports = {

root: true,

env: {

browser: true,

node: true

parserOptions: {

parser: '@typescript-eslint/parser'

extends: [

'prettier',

'prettier/vue',

'plugin:prettier/recommended',

'@nuxtjs',

'plugin:nuxt/recommended'

plugins: [

'prettier',

'@typescript-eslint'

rules: {

'@typescript-eslint/no-unused-vars': 'error'

}

package.json内のlintスクリプトを下記に変更します。

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

"scripts": {

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

これで、ESLintの設定は完了です。
後は.eslintc.jsのrulesにお好みの設定を追加してください。

ここからはtips的に開発していて必要になってくる内容を書いていきます。

コンポーネント内での型定義

* `propType`, `propOptions`の利用

1 2	* `propType`, `propOptions`の利用

コンポーネント内のdataに型を指定するときは下記の様にasを使用します。

data: () => ({
  contents: [] as object[]
}),

data: () => ({

contents: [] as object[]

}),

ただ、これだとobjectのプロパティに全ての型が適合してしまい不十分なので、TypeScriptで型定義してあげましょう。

type Contents = { id: number; name: string }[]
export default Vue.extend({
...
  data: () => ({
    contents: [] as Contents
  }),

type Contents = { id: number; name: string }[]

export default Vue.extend({

...

data: () => ({

contents: [] as Contents

}),

これでプロパティに型推論が効きます。

型定義を使いまわしたい場合は別ファイルに定義してexportしてあげればOKです
models/contents.ts

export type Contents = { id: number; name: string }[]

1 2	export type Contents = { id: number; name: string }[]

import { Contents } from '~/models/Contents'
export default Vue.extend({
...
  data: () => ({
    contents: [] as Contents
  }),

import { Contents } from '~/models/Contents'

export default Vue.extend({

...

data: () => ({

contents: [] as Contents

}),

コンポーネントのpropsで、typeで指定できるネイティブコンストラクタObject,Array(TypeScriptの型ではなくvueの型推論機能) のTypeScript型定義を行いたい場合は、propTypeを使用します。

import Vue, { PropType } from 'vue'
import { Contents } from '~/models/Contents'
export default Vue.extend({
...
  props: {
    contents: { type: Array as PropType<Contents>, required: true }
  },

import Vue, { PropType } from 'vue'

import { Contents } from '~/models/Contents'

export default Vue.extend({

...

props: {

contents: { type: Array as PropType<Contents>, required: true }

その他String等のネイティブコンストラクタを指定したプロパティを参照した時に下記のような型参照エラーが出た場合は、PropOptionsを使うことで解決できます。

48:10 Property 'value' does not exist on type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
46 |}),
47 |mounted() {
> 48 |this.value = this.defaultValue
|^
49 |},
50 |methods: {
51 |setValue(e: Date): void {

48:10 Property 'value' does not exist on type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.

46 |}),

47 |mounted() {

> 48 |this.value = this.defaultValue

49 |},

50 |methods: {

51 |setValue(e: Date): void {

import Vue, { PropOptions } from 'vue'
export default Vue.extend({
props: {
  id: { type: String, require: true } as PropOptions<string>,
  value: { type: String, require: true } as PropOptions<string>,

import Vue, { PropOptions } from 'vue'

export default Vue.extend({

props: {

id: { type: String, require: true } as PropOptions<string>,

value: { type: String, require: true } as PropOptions<string>,

jestの設定

todo

環境変数の扱い方

todo