Nuxt.js v2.5 + TypeScriptでプロジェクトをはじめる

Nuxtがv2.5から標準でTypeScriptに対応したので、Nuxt + TypeScriptでプロジェクトを始めようとした際、自分好みに使っていくにはけっこう設定等が必要だったので忘れないように手順を書き残そうと思います。なお、既存のNuxtアプリケーションをTS化するわけではなくあくまで新規プロジェクト作成を前提としています。

## プロジェクト作成
まずは手っ取り早く`create nuxt-app`で新規プロジェクトを作成します。

```
$ yarn create nuxt-app nuxt-ts-sample
```
いろいろ聞かれます。

```
? Project name (nuxt-ts-sample)
```
Enterを押す。

```
? Project description (My pioneering Nuxt.js project)
```
Enterを押す。

```
? Use a custom server framework
❯ none
  express
  koa
  adonis
  hapi
  feathers
  micro
```

noneにカーソルをあててEnterを押す。

```
? Choose features to install
 ◉ Progressive Web App (PWA) Support
 ◉ Linter / Formatter
 ◉ Prettier
❯◉ Axios
```

全部チェックつけます。

```
? Use a custom UI framework (Use arrow keys)
❯ none
  bootstrap
  vuetify
  bulma
  tailwind
  element-ui
  buefy
```

これもなんでも。今回はnoneにします。

```
? Use a custom test framework (Use arrow keys)
  none
❯ jest
  ava
```

これもなんでも。jest選んでおきます。

```
? Choose rendering mode (Use arrow keys)
❯ Universal
  Single Page App
```

これもなんでも。Universal選んでおきます。

```
? Author name (keiichirosoeda)
```

必要であれば書き換えて、Enterを押す。

```
? Choose a package manager (Use arrow keys)
  npm
❯ yarn
```

yarn派なのでyarnを選んでEnter。

ようやくソースコードがダウンロードされます。

## まずはビルド

#### srcディレクトリを作成

個人的に、srcディレクトリにコードをまとめるのが好きなので、各ディレクトリをsrcに移動します。

```
$ cd nuxt-ts-sample
$ mkdir src
$ mv assets components layouts middleware pages plugins server static store test src
```

#### `nuxt.config.js`でソースのディレクトリを指定。

`nuxt.config.js`に一行加えてsrcDirを変更します。

```nuxt.config.js
module.exports = {
  srcDir: 'src/',
  // ...
};
```

#### 一度ビルドして立ち上げてみます。
```
$ yarn dev
```

http://localhost:3000/ へアクセスし、以下画面がでれば問題ないです。

<img width="1440" alt="nuxt-ts-sample.png" src="https://qiita-image-store.s3.amazonaws.com/0/136591/34735482-40b6-adfe-5c11-ae09cc486a28.png">


## TypeScript化
では早速TypeScriptで書きかえていきます。

#### 必要なパッケージをインストール
まずはじめに必要なパッケージをインストールします。`create nuxt-app`でプロジェクト作成すると、2.4系のnuxtがインストールされてしまうので（2019年3月現在）、2.5系をインストールするためnuxtも再度yarn addします。

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

#### `tsconfig.json`を作成してビルド
`yarn dev`すると、TypeScriptの設定ファイルが自動で書き込まれます。そのためにまず元となる`tsconfig.json`を作成します。

```
$ echo {} > tsconfig.json
```

ビルドします。

```
$ yarn dev
```

以下のように`tsconfig.json`が上書きされます。

```tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "*"
      ],
      "@/*": [
        "*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

```

#### `tsconfig.json`を修正
ソースコード内で`~/xxx`, `~@xxx`のようにディレクトリ指定できるようにTSのコンパイル設定を修正します。

```tsconfig.json
{
  "compilerOptions": {

    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "*"
      ],
      "@/*": [
        "*"
      ]
    },

  }
}

```

#### `pages/index.vue`をTS化

```pages/index.vue
// ...
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Logo from '~/components/Logo.vue'

@Component({
  components: {
    Logo
  }
})
export default class Index extends Vue {
  //
}
</script>
// ...
```

#### ESlintの設定を修正
TypeScriptで書けるようにESlintの設定を修正します。

プラグインのインストール

```
$ yarn add -D @typescript-eslint/eslint-plugin
```
`.eslintrc.js`を修正。

```.eslintrc.js
module.exports = {
  // ...
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  // ...
  plugins: [
    'prettier',
    '@typescript-eslint' // 追加
  ],
  // ...
  rules: {
    'nuxt/no-cjs-in-config': 'off',
    'no-unused-vars': 'off',
    'no-unused-expressions': 'off'
  },
  // ...
}
```

#### 再ビルド
```
$ yarn dev
```
再度画面が立ち上がれば、Nuxt + TypeScriptアプリケーションのひな形完成です！

## おわりに
lintの設定はお好みで追加・変更していただければと。
具体的なTypeScriptでの実装についても、近いうちに書けたらと思います。vuexなど。