属性“市场”在类型“ {市场上不存在：[市场]；在打字稿中

Question

当我尝试访问action.payload.markets时，它给了我编译时错误：

  

“ {”市场类型上不存在“市场”属性：[市场]； } | {   市场：市场； } | {错误：任何； }'。物业“市场”不   存在于类型'{市场：市场； }'。

这是我正在使用的代码。

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。