'create nuxt app'で作成したプロジェクトにTypeScript導入した際にした設定


create nuxt app × tsをやろうとしたときに行った設定を記す。

とりあえずlintもts用に走っててぼちぼち動いているのだが、

複数のサイトを参考にしたため結果的に無駄だった設定、足りてない設定もありそうなので、

整理のために少し調べながらのメモ。

心の広い方教えてください。。。

基本的には公式お勧めのこいつを使いました。

[Nuxt TypeScript](https://typescript.nuxtjs.org/ja/)

# create nuxt app での選択

- サーバーサイド：None(Nuxt default server)
- Universal モード(SSR)

# インストールしたモジュールたち

```json:package.json
{
  "name": "",
  "version": "",
  "description": "",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/bulma": "^1.2.1",
    "@nuxtjs/pwa": "^3.0.0-0",
    "firebase": "^7.8.1",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxt/typescript-build": "^0.5.4",
    "@nuxtjs/eslint-config-typescript": "^1.0.2",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "vuex-module-decorators": "^0.16.1"
  }
}


```

この中でtsようにcreate nuxt app後にインストールしたdependenciesは、

`@nuxt/typescript-build`、`@nuxtjs/eslint-config-typescript`、`vuex-module-decorators`の三つ

## @nuxt/typescript-build

layouts、components、plugins および middlewares TypeScript を使用する Nuxt モジュール。らしい。

インストール後にした作業として、

`nuxt.config.js`の buildModulesに`'@nuxt/typescript-build'`を追加、

[モジュール](https://ja.nuxtjs.org/guide/modules/)

nuxtの設定にはmodulesってのと上述したbuildModulesが項目にあり、

どちらもnuxt起動時に読み込むモジュールを記述しておくのですが、

開発もしくはbuildでしか使わないモジュールはbuildModulesに入れるべしらしいです。

package.jsonのdevDependenciesてきなかんじですかね。

下記、ts設定ファイルを追加、

```Json:tsconfig.json
{
  "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"
  ]
}
```

下記ファイルをsrcに追加。`.vue`ファイルをtsコンパイルにかけるやつです。

```TypeScript:vue-shim.d.ts
declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}
```

## @nuxtjs/eslint-config-typescript

create nuxt app時点では、`@nuxtjs/eslint-config`があるので、それをuninstallしてからこのモジュールをインストールする。(`@nuxtjs/eslint-config`は`@nuxtjs/eslint-config-typescript`に含まれています。)

`.eslintrc.js`ファイル(lint設定ファイル)のextendsに`'@nuxtjs/eslint-config-typescript'`を追加

```JavaScript:.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {
  }
}
```

package.jsonのscriptのlintを`"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."`

に修正、これでlintが通るようになる。

## vuex-module-decorators

store内でts使ってクラスを書けるというかしこ君。記述がすごい楽になるので便利でした。

component内で使いたかったら`vue-property-decorator`をinstall

## その他

`nuxt.config.js`に

```JavaScript:nuxt.config.js
　/*
  ** type script config
  */
  typescript: {
    typeCheck: {
      eslint: true
    }
  }
```
を追加。

ここまでで`npm run dev`でホットリローディングで良い感じにtslintも走りつつ開発する環境になりました。

# 一言

このほかにもnuxt設定ファイルをts化したり出来るモジュールもあるが今回は使用してない。

ts組み込むって言ったってどこまでやるべきなんでしょうか。