Vuex 모듈의 TypeScript 오류 - 하위 모듈이 Vuex의 인덱스 모듈에 할당할 수 없는 잘못된 오류

Vuex 모듈의 TypeScript 오류 - 하위 모듈이 Vuex의 인덱스 모듈에 할당할 수 없는 잘못된 오류

TypeScript를 사용하여 간단한 vue-project를 구축하고 있습니다.저는 vue 프로젝트에 vuex 스토어를 썼는데, 그 스토어에는 'calculation'이라는 서브모듈이 있습니다.그러나 서브모듈을 포함한 메인스토어를 작성하면 이상한 에러(tserror)가 발생합니다.

다음은 제 vuex 코드입니다.

// calculation.ts
import { Module } from 'vuex'

interface ICalculationState {
  a: number
}

const calculation: Module<ICalculationState, {}> = {
  namespaced: true,

  state: {
    a: 10
  }
}

export {
  calculation,
  ICalculationState
}

// index.ts
import Vue from 'vue'
import Vuex from 'vuex'

import { calculation, ICalculationState } from './calculation'

Vue.use(Vuex)

interface IState {
  calculation: ICalculationState
}

const store = new Vuex.Store<IState>({
  modules: {
    calculation
  }
})

export { store, IState }

오류 문자열

Type '{ calculation: Module<ICalculationState, {}>; }' is not assignable to type 'ModuleTree<IState>'.
  Property 'calculation' is incompatible with index signature.
  Type 'Module<ICalculationState, {}>' is not assignable to type 'Module<any, IState>'.
  Types of property 'actions' are incompatible.
  Type 'ActionTree<ICalculationState, {}> | undefined' is not assignable to type 'ActionTree<any, IState> | undefined'.
  Type 'ActionTree<ICalculationState, {}>' is not assignable to type 'ActionTree<any, IState>'.
  Index signatures are incompatible.
  Type 'Action<ICalculationState, {}>' is not assignable to type 'Action<any, IState>'.
  Type 'ActionHandler<ICalculationState, {}>' is not assignable to type 'Action<any, IState>'.
  Type 'ActionHandler<ICalculationState, {}>' is not assignable to type 'ActionHandler<any, IState>'.
  The 'this' types of each signature are incompatible.
  Type 'Store<IState>' is not assignable to type 'Store<{}>'.
  Types of property 'registerModule' are incompatible.
  Type '{ <T>(path: string, module: Module<T, IState>, options?: ModuleOptions | undefined): void; <T>(path: string[], module: Module<T, IState>, options?: ModuleOptions | undefined): void; }' is not assignable to type '{ <T>(path: string, module: Module<T, {}>, options?: ModuleOptions | undefined): void; <T>(path: string[], module: Module<T, {}>, options?: ModuleOptions | undefined): void; }'.
  Types of parameters 'module' and 'module' are incompatible.
  Type 'Module<any, {}>' is not assignable to type 'Module<any, IState>'.
  Types of property 'actions' are incompatible.
  Type 'ActionTree<any, {}> | undefined' is not assignable to type 'ActionTree<any, IState> | undefined'.
  Type 'ActionTree<any, {}>' is not assignable to type 'ActionTree<any, IState>'.
  Index signatures are incompatible.
  Type 'Action<any, {}>' is not assignable to type 'Action<any, IState>'.
  Type 'ActionHandler<any, {}>' is not assignable to type 'Action<any, IState>'.
  Type 'ActionHandler<any, {}>' is not assignable to type 'ActionHandler<any, IState>'.
  Type '{}' is not assignable to type 'IState'.ts(2322)
index.ts(9, 3): 'calculation' is declared here.
index.d.ts(95, 3): The expected type comes from property 'modules' which is declared here on type 'StoreOptions<IState>'

내 코드가 있는 곳의 밑줄에서 빨간색 밑줄이 사라졌으면 좋겠어.

calculation.ts는 "Module"의 두 번째 파라미터로 IState를 제공합니다.이렇게 루트 상태를 정의하면 오류가 사라집니다.

const calculation: Module<ICalculationState, IState>

언급URL : https://stackoverflow.com/questions/57731741/typescript-error-in-vuex-module-something-wrong-that-sub-module-is-unable-to-a