Vuex に雑に最低限の型をつけたいときに使うやつ

src_App.vue

<template>
  <div>
    <p>{{count}}</p>
    <button type="button" @click="increment">+</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  computed: {
    count() {
      return this.$state.count // これは補完が効く
    },
    anyCount() {
      return this.$store.state.count // これは any
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment') // ここの ActionTypes は定義しているわけではないので any
                                        // keyof にしてやればいけるので、やりたかったら shims-vue.d.ts を編集する
    }
  }
})
</script>

src_store_index.ts

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export interface State {
  count: number
}

export interface Context {
  commit: (name: string) => void
}

export interface Mutations {
  [key of string]: (state: State, payload?: any) => void
}

export interface Actions {
  [key of string]: (context: Context, payload?: any) => void
}

export const state: State = {
  count: 0
}

export const mutations: Mutations = {
  increment(state) {
    state.count ++
  }
}

export const actions: Actions = {
  increment({ commit }) {
    commit('increment')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

src_types_shims-vue.d.ts

import Vue from 'vue'
import * as Vuex from 'vuex'
import * as CustomStore  from '../store/'

declare module 'vue/types/vue' {
  interface Vue {
    $store: Vuex.Store<any>, // ここがちょうどいま問題になってるやつ
    $state: State
  }
}

/**

本当はこうしたい……こうしたくない？

interface ICustomStore extends Vuex.Store {
  state: CustomStore.State
  dispatch: (k: keyof CustomStore.actions) => any
}

interface Vue {
  $store: ICustomStore 
}

**/