Vuex 맵은 TypeScript를 사용하여 기능합니다.

Vuex 맵은 TypeScript를 사용하여 기능합니다.

다음과 같은 상태(게임 네임스페이스)에 대한 인터페이스가 있습니다.

interface GameState {
  selectedTab: number;
  timeout: number;
  snackbar: boolean;
  text: string;
  doneTasks: number;
  taskTypes: TaskType[];
  stages: Stage[];
}

태스크 맵을 작성하려고 합니다.다음과 같이 mapState를 사용하여 컴포넌트 내에서 타입을 지정합니다.

...mapState('game', {
  taskTypes: (state: GameState): TaskType[] => state.taskTypes,
}),

"Argument of taskTypes: (상태: GameState) => TaskType[]; }'이(가) 'string[]' 유형의 파라미터에 할당할 수 없습니다."라는 오류가 표시됨"

함수의 "상태" 파라미터 타입을 "임의"로 정의할 때 컴파일 및 동작하기 때문에 devtools에서 해당 함수를 "디버깅"하여 "상태" 파라미터가 무엇을 보유하고 있는지 확인하려고 했습니다.이 파라미터는 GameState 인터페이스에 정의되어 있는 정확한 소품을 가진 게임 상태를 유지합니다.

ts가 올바른 타입으로 "상태" 파라미터를 정의할 수 없는 이유를 아는 사람이 있습니까(그것이 애초에 인터페이스를 정의하고 "임의"를 회피하는 전체 목적입니다).

이것도 동작하지 않습니다.

...mapState({
  taskTypes: ({ state }: Store<GameState>): TaskType[] => state.taskTypes,
}),

누가 그런 문제를 마주친 적이 있나요?어떻게 대처하는 것이 가장 좋은 방법인가?

mapActions 등에 대해 동일합니다.

업데이트 나는 내 가게와 모듈에 더 나은 오타를 주기 위해 노력한다.현시점에서는 다음과 같습니다.본점:

export default new Store<RootState>({
  modules: {
    users,
    game,
  },
});

rootState는 다음과 같습니다.

export interface RootState {
  game: GameState;
  users: UserState;
}

게임 모듈:

type GameActionContext = ActionContext<GameState, RootState>;

const gameModule: Module<GameState, RootState> = {
  namespaced: true,
  state: {
    selectedTab: 0,
    timeout: 5000,
    snackbar: false,
    text: '',
    doneTasks: 0,
    taskTypes: [...],
    stages: [...],
  } as GameState,
  mutations: {/*Mutations*/} as MutationTree<GameState>,
  actions: {/*Actions*/} as ActionTree<GameState, RootState>,
};

export default gameModule;

주 지도는 다음과 같습니다.

...mapState({
      taskTypes: (state): TaskType[] => state.GameState.taskTypes
})

에러가 발생하고 있습니다.

(매개 변수) 상태: 알 수 없음 - 개체가 '알 수 없음' 유형입니다.

지금까지 내가 생각해낸 최고의 솔루션을 게시한다(최소한의 코드와 입력된 코드에 대해서는):

...mapState({
  taskTypes: (state): TaskType[] => (state as RootState).game.taskTypes,
}),

왜냐하면 상태는 항상 루트스테이트와 같기 때문에 캐스팅은 모든 mapState에서 항상 동일하게 유지됩니다.이 솔루션이 완전히 만족스럽다고는 말할 수 없지만 현재로선 이 솔루션이 가장 좋은 솔루션인 것 같습니다(추가 인터페이스나 긴 라인의 캐스팅 타입은 필요 없습니다).

나는 일반적으로 그 물체를 알 수 없는 것으로 캐스팅하고 나서 실제 유형으로 만들어야 했다.

기본적으로 값을 함수로 사용할 수 있도록 하는 다음과 같은 범용 유형을 작성한 다음 접근 방식을 사용할 수 있습니다.

export type Computed<T> = {
    [K in keyof T]: () => T[K];
};

이 기능을 다음과 같은 컴포넌트에서 사용할 수 있습니다.

...((mapState('auth', ['taskTypes']) as unknown) as Pick<Computed<GameState>, 'taskTypes'>)

지금이다this.taskTypes를 입력해야 합니다.

범용 타입을 다음에 전달할 수 있습니다.mapState.

...mapState<GameState>('game', {
  taskTypes: (state: GameState): TaskType[] => state.taskTypes,
}),

Vue2 컴포넌트 내에서 올바르게 입력하는 방법은 다음과 같습니다.mapGetters에서도 같은 오류 메시지가 나타납니다.

...(mapGetters("module", ['someGetter']) as {someGetter: () => boolean}),
...(mapState("appModule", ["appIsLoading"]) as {appIsLoading: () => boolean;}),
...(mapMutations("appModule", ["SET_APP_IS_LOADING"]) as {SET_APP_IS_LOADING: (payload: boolean) => void;}),
...(mapActions("appModule", ["extendLockTime"]) as {extendLockTime: () => void;}),

이 유형의 힌트와 유형 점검은 구성 요소 내부에서 정확합니다.

언급URL : https://stackoverflow.com/questions/66189921/vuex-map-functions-with-typescript