房地产“市场”不存在于{市场：[市场]；}的类型上

Question

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

“{ market: Market；}而论市场:市场；}\{ error: any；}‘”类型不存在“Property’Market”。“{ 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中的所有内容都会缩小(在您的示例中，other语句将是另外两种类型的联合)。您还可以在其他条件语句中使用类型保护，而不仅仅是ifs。