Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Nuxt.js 2.x + TypeScript 4.x その0007 storeの型を設定する

参考にさせていただいたページ

今日の開発環境

  • Nuxt 2.14.12
  • TypeScript 4.2.3

定義する

基本的なタイピング」をよく読むとよい。

  • ReturnType<typeof state> を使って、stateの型を定義する
  • GetterTree, ActionTree, MutationTree を使う

GetterTreeについて

例えばgettersの場合は、以下のような感じでGetterTreeを使って、getterの引数に入ってくるstateとrootStateの型を設定している。gettersとrootGettersはanyで入ってくる。

export const getters: GetterTree<AnotherModuleState, RootState> = {
  evenMore: state => state.more + 5,
  nameAndMore: (state, getters, rootState) => `${rootState.name}: ${state.more}`,
}