物业'市场'不存在于'{市场:[市场]; 在打字稿中

Question

当我试图访问时action.payload.markets,它给我编译时错误:

物业'市场'不存在于'{市场:[市场]; } | {市场:市场; } | {错误:任何; }".物业'市场'不存在于'{market:Market; }".

这是我正在使用的代码.

market.actions.ts

export class LoadMarket implements Action {
  readonly type = MarketActionTypes.LoadMarket;
  constructor(public payload: {markets: [Market]}) {}
}

export class UpdateMarket implements Action {
  readonly type = MarketActionTypes.UpdateMarket;
  constructor(public payload: {market: Market}) {}
}
export class LoadMarketFailure implements Action {
  readonly type = MarketActionTypes.LoadMarketFailure;
  constructor(public payload: {error: any}) {}
}

export type MarketActions =
  | LoadMarket
  | UpdateMarket
  | LoadMarketFailure;

market.reducers.ts

export function marketReducer(state = initialState, action: MarketActions): MarketState {
  switch (action.type) {   
    case MarketActionTypes.LoadMarket: {
      return {
        ...state,
        markets: action.payload.markets, // this is giving compile time error.  Property 'markets' does not exist on type '{ markets: [Market]; } | { market: Market; } | { error: any; }'. Property 'markets' does not exist on type '{ market: Market; }'.
        error: null
      };
    }
    default: {
      return state;
    }
  }
}

这是一个截图:

Answer 1

看起来您的有效负载可以是以下三种类型之一:

• { markets: [Market]; }
• { market: [Market]; }
• { error: any }

编译器警告您它可能不是您假定的类型(第一个).

您应该通过缩小类型来处理这个问题,您可以使用类型断言来完成.

示例自定义类型保护 - 您可能需要比此更深入的检查...

function hasMarkets(input: MyUnionType): input is { markets: [Market]; } {
    return (!!(<any>input).markets); 
}

这里有一个示例,没有,然后是自定义类型后卫:

const val1 = example.markets; // No

if (hasMarkets(example)) {
    const val2 = example.markets; // Yes
}

当您使用型后卫,一切都会在缩小if,以及在else,如果你有一个(在你的情况下,else语句将是其他两种类型的联合).您还可以将类型保护与其他条件语句一起使用,而不仅仅是ifs.