Nuxt.js × TypeScript セットアップ

## Prologue

Nuxt.jsとTypeScriptでプロジェクトを立ち上げるときに意外と設定することが多いため、設定をまとめました。  
基本はDocument通りになるため、自身で設定する場合には都度公式を確認することをお勧めします。

- [Nuxt.js](https://ja.nuxtjs.org/)
- [Nuxt Typescript](https://typescript.nuxtjs.org/ja/)


*2020/4/2 追記*: 
`create-nuxt-app v2.15.0` : **typescript-buildを使用したTSサポートがリリース**
参考: https://github.com/nuxt/create-nuxt-app

内容の検証も追記しましたので、そちらを確認したい方は[こちら](https://qiita.com/miiiii/items/7d79f4f02303e8e486e3#create-nuxt-app-v2150)からどうぞ


## 環境

- macOS: 10.15.2
- node.js: 10.16.0
- terminal: iTerm
- エディタ: VS Code
- パッケージマネージャ: `yarn`

## Nuxt.jsをインストール

- Nuxt.jsをインストールします。  
今回プロジェクト名は`sample-nuxt`としています。プロジェクトを作成したいディレクトリまで移動して以下のコマンドを実行します。

```
yarn create nuxt-app sample-nuxt 
```

- 実行結果  
*環境、設定内容によって一部異なります。

```
create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in sample-nuxt
? Project name sample-nuxt
? Project description My hunky-dory Nuxt.js project
? Author name mi**
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools Prettier
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
```

- インストールが成功しているか起動して確認  
プロジェクトのルートディレクトリまで移動して以下のコマンドを実行します。

```
yarn dev
```

## TypeScriptを追加
*公式Documentに書いてある通りになるため、必要に応じてDocumentを確認してください。
参考: https://typescript.nuxtjs.org/ja/guide/

1. Nuxt TypeScriptのサポートを受けるために`@nuxt/typescript-build`をインストール

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

2\. nuxt.config.jsを修正

``` JS
/*
** Nuxt.js dev-modules
*/
buildModules: [
  '@nuxt/typescript-build'
],
```

3\. tsconfig.jsonの作成

参考: https://typescript.nuxtjs.org/ja/guide/setup.html#%E8%A8%AD%E5%AE%9A

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

4\. vue-shim.d.tsの作成
Vueファイルの型を提供する宣言

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

5\. TypeScriptで記述するファイルのscriptタグを変更

``` JS
<script lang="ts">

</script>
```

ここでComponentをimportする箇所でエラーが起こった場合、拡張子等を確認してください。

### Runtimeのインストール

参考: https://typescript.nuxtjs.org/ja/guide/runtime.html

1. `@nuxt/typescript-runtime`のインストール

```
yarn add @nuxt/typescript-runtime
```

2\. package.jsonの修正

`scripts`  `nuxt` -> `nuxt-ts` に変更

``` JSON
"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "test": "jest"
}
```

### Lintのインストール

参考: https://typescript.nuxtjs.org/ja/guide/lint.html

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

- .eslintrc.jsの作成

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

### nuxt.config.tsを修正

1. 拡張子の変更
`nuxt.config.js` -> `nuxt.config.ts`

2. コードの修正
この時点で型を指定していない箇所にエラーが表示された場合適宜修正します。

例: エラー内容

``` JS
Parameter 'config' implicitly has an 'any' type.
```

以下のように修正

``` JS
extend (config:any, ctx:any) {}
```

## create-nuxt-app v2.15.0

typescript-buildを使用したTSサポートがリリースされました。
参考: https://github.com/nuxt/create-nuxt-app

設定内容は上記と変わらないためドキュメントを読みながら進めることをお勧めします。
ここでは差分のみ確認をしています。

## プロジェクトの作成

プロジェクト名は `sample-app` としています。

``` JS
yarn create nuxt-app sample-app

success Installed "create-nuxt-app@2.15.0" with binaries:
      - create-nuxt-app

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in sample-app
? Project name sample-app
? Project description My sweet Nuxt.js project
? Author name mi**
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules Axios
? Choose linting tools Prettier
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
```

注目すべきは `typescript` の選択と `@nuxt/typescript-runtime` が増えているところ。
`typescript` の設定が楽になりました。

動作を確認

```
yarn dev
```


以下を参考にして、必要なモジュールとセットアップの確認をしていきます。

https://typescript.nuxtjs.org/ja/guide/setup.html#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB


1. `package.json` で `@nuxt/typescript-build` と `@nuxt/typescript-runtime` がインストールされていることを確認
2. `nuxt.config.js` の `buildModules` に `@nuxt/typescript-build` が記載されていることを確認
3. `tsconfig.json` があるか確認


`tsconfig.json` の中身を公式ドキュメントと比較すると以下の項目が増えていましたが、特に問題はないためこのまま進めます。気になる方は調べてみてください。

``` JS
"experimentalDecorators": true, //
... // 略
"exclude": [
    "node_modules",
    ".nuxt",  
    "dist"  
  ]
```

4\. `vue-shim.d.ts` の追加

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

5\. TypeScriptで記述するためComponent等のscriptをtsに変更

``` JS
<script lang="ts">

```

6\. `package.json` の `scripts` が `nuxt-ts` になっているか確認
7\. `nuxt.config.js` を `nuxt.config.ts` に変更、 型指定をしてない箇所はエラーが出るため修正

***

以上です。設定周りが楽になった印象を受けました。
パッケージ周辺も現時点での新しいバージョンになっていたりするので、気になる方は細かい部分を見てみるのも楽しいと思います。
細かい設定は変わらないため、追記とさせていただきます。

***



## Epilogue

[Nuxt.js](https://ja.nuxtjs.org/)も[NuxtTypescript](https://typescript.nuxtjs.org/ja/)も日本語のDocumentがあるため、そちらを確認するのが一番です。
ただ、始めるところが大変だと思うのでこちらが学習の一助となれば幸いです。

何か間違っている箇所があればご指摘ください。

###　課題
`nuxt.config.ts`の型追加は今回使用していないためつい`any`を使用してしまいました...
実際活用する際にはきちんと調べて、より良い方法があればこちらに追記します。