構成

ディレクトリ構成

.
├── nuxt.config.js
├── package.json
├── pages
│   └── index.vue
├── store
│   ├── index.ts
├── tsconfig.json
└── tslint.json

package.json

package.json

{
  "scripts": {
    "dev": "nuxt"
  },
  "devDependencies": {
    "@types/node": "^10.12.18",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.2"
  },
  "dependencies": {
    "nuxt": "^2.3.4",
    "nuxt-property-decorator": "^1.3.1",
    "nuxt-typescript": "^0.11.0",
  }
}

devDependenciesとdependenciesの切り分けはよくわからんので、nuxt-community/typescript-templateを参考にした。

nuxt-typescriptは、modules/typescript.jsを自分で書かなくてもいいやつ。公式度合いがどれくらい心配なのかは不明。

nuxt.config.js

nuxt.config.js

module.exports = {
  modules: ["nuxt-typescript"]
}

nuxt-typescriptのとおり。

tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "strict": true,
    "sourceMap": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true
  }
}

nuxt-typescriptのとおり。

pages/index.vue

pages/index.vue

<template>
  <section>
    <h1>hello {{ message }}</h1>
    <button @click="increment">{{ counter }}</button>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component
export default class extends Vue {
  message = "world"

  get counter() {
    return this.$store.state.counter;
  }

  increment() {
    this.$store.commit('increment');
  }
}
</script>

適当にdataとstoreを使うサンプル。

store/index.ts

store/index.ts

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state: any) {
    state.counter++;
  }
}

適当にmutationを使ったサンプル。

インストール手順

上記ディレクトリ構成を配備
npm install
npm run dev

様々な地雷

本当に様々な地雷があってもう眠いので適当に書きます

nuxt-community/typescript-templateは動かない

そのまま動かしてもだめ。パッケージを全部アップデートしてもだめ。

tsconfig.jsonで入力ファイルが無いよというエラー

プロジェクト内に一つでも.tsファイルが無いと正常に動作しません。

.vueファイルのscript部の「@Component」のアットマークでunexpectedとか

tsconfig.jsonで入力ファイルが無いよというエラーこいつのせい。これがほんとにハマった

npm-install時にUnexpected end of JSON input while parsing

Unexpected end of JSON input while parsing near '...","@types/convert-sou'

これが出たらnpm cache clean --forceしろってここの人たちが言ってるし、私もやったら治った。

storeのなかにxxxx.tsを作っても読み込んでくれない

これもハマったけど、最初からやり直したらいつの間にか治った。よくわからん。
もしかしたらtsとjsのファイルを共存できないのかもしれない。

nuxt-typescriptを使うのはbetterか

全く自信がない。nuxt-community/typescript-templateが動かない以上何を信じたら良いのやら。
最もメンテナンスされててディファクトスタンダードなのは何なんだろう。
こいつはnuxt-community/typescript-templateのissueを見てたら見つけたやつ。

storeの分割もできるよ

こういうやつも問題なくできた

├── store
│   ├── mutations.ts
│   └── state.ts

公式ドキュメントに書いてある機能です。

vueファイルのstyleとscriptの分割もできるよ

├── pages
│   ├── index.vue
│   └── script.ts

pages/index.vue

<template>
  略
</template>

<script lang="ts" src="./script.ts"></script>

公式ドキュメントに書いてある機能です。

ちなみに、このようにscript部を.tsファイルにすると、vscodeのデコレータを使うことのWarningが消える

型定義

さっきやっと動いたばかりだしもう朝方だからギブアップ。
多分nuxt-community/typescript-templateのindex.d.tsとかパクれば動くとおもう。vuexの型定義については、この記事が非常に詳しい。
vuexとかapiが残念なので、あんまり型定義を頑張りすぎないほうが良いと思われる。