TS2339打字错误，但不确定原因...类型上不存在属性

Question

我对Typescript相对较新，目前正在构建一个包含Redux的React应用程序，并正在使用Typescript。

Typescript在我的reducer中给出了以下错误；

ERROR in /Users/<REDACTED>/web/src/redux/reducers/steppedViews.ts
./src/redux/reducers/steppedViews.ts
[tsl] ERROR in /Users/<REDACTED>/web/src/redux/reducers/steppedViews.ts(13,53)
      TS2339: Property 'activeView' does not exist on type '{ activeView: number; } | { totalViews: number; }'.
  Property 'activeView' does not exist on type '{ totalViews: number; }'.

ERROR in /Users/<REDACTED>/web/src/redux/reducers/steppedViews.ts
./src/redux/reducers/steppedViews.ts
[tsl] ERROR in /Users/<REDACTED>/web/src/redux/reducers/steppedViews.ts(15,53)
      TS2339: Property 'totalViews' does not exist on type '{ activeView: number; } | { totalViews: number; }'.
  Property 'totalViews' does not exist on type '{ activeView: number; }'.

我的action类型定义如下

export interface SetActiveView {
  type: typeof types.steppedViews.SET_ACTIVE_VIEW;
  payload: {
    activeView: number;
  };
}

export interface SetTotalViews {
  type: typeof types.steppedViews.SET_TOTAL_VIEWS;
  payload: { totalViews: number };
}

export type ReduxActionsSteppedViews = SetActiveView | SetTotalViews;

我的减速器是

import types from '../types';
import { ReduxActionsSteppedViews } from '../actions/steppedViews';

export interface ReduxStateSteppedView {
  activeView: number;
  totalViews: number;
}
const initialState: ReduxStateSteppedView = { activeView: 0, totalViews: 0 };

const reducer = (state = initialState, action: ReduxActionsSteppedViews): ReduxStateSteppedView => {
  switch (action.type) {
    case types.steppedViews.SET_ACTIVE_VIEW:
      return { ...state, activeView: action.payload.activeView };
    case types.steppedViews.SET_TOTAL_VIEWS:
      return { ...state, totalViews: action.payload.totalViews };
    default:
      return state;
  }
};

export default reducer;

我不明白为什么会发生这种情况，因为根据我的理解，定义的类型是'{activeView: number;} | {totalViews: number;}‘，所以它应该能够看到*.activeView或*.totalViews。

任何关于这个错误的指导都将不胜感激。谢谢!

Answer 1

声明的类型为{activeView: number;} | {totalViews: number;}，因此activeView或totalViews在ReduxActionsSteppedViews.payload中都不是必需属性

Typescript不知道你是否做了类型检查(在你的情况下)，所以你需要告诉她：

const reducer = (state = initialState, action: ReduxActionsSteppedViews): ReduxStateSteppedView => {
  switch (action.type) {
    case types.steppedViews.SET_ACTIVE_VIEW:
      return { ...state, activeView: (<SetActiveView> action).payload.activeView };
    case types.steppedViews.SET_TOTAL_VIEWS:
      return { ...state, totalViews:(< SetTotalViews> action).payload.totalViews };
    default:
      return state;
  }
};