追記。この記事の内容は古いです。無事に公式サポートされました。
地獄。早く(まともに)公式サポートして。
こんなにつらいならjsでいいんじゃないかと諦めかけた。
構成
.
├── nuxt.config.js
├── package.json
├── pages
│ └── index.vue
├── store
│ ├── index.ts
├── tsconfig.json
└── tslint.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
module.exports = {
modules: ["nuxt-typescript"]
}
nuxt-typescriptのとおり。
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
<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
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
<template>
略
</template>
<script lang="ts" src="./script.ts"></script>
公式ドキュメントに書いてある機能です。
ちなみに、このようにscript部を.tsファイルにすると、vscodeのデコレータを使うことのWarningが消える
型定義
さっきやっと動いたばかりだしもう朝方だからギブアップ。
多分nuxt-community/typescript-templateのindex.d.tsとかパクれば動くとおもう。vuexの型定義については、この記事が非常に詳しい。
vuexとかapiが残念なので、あんまり型定義を頑張りすぎないほうが良いと思われる。