使用应存在属性的类型时，类型上不存在 Typescript 属性

Question

I am using a function which takes a message handler function as an argument. The message handler is defined as:

export declare type MessageHandler = <EventType extends AnyEventName = AnyEventName>(type: AnyEventName, payload: EventPayload<EventType>) => void;

In the code there is also the following definition:

export declare type AnyEventPayload = EventPayload<AnyEventName>;

the message handler I am passing is defined as follows:

(message_type: AnyEventName, payload: AnyEventPayload) => {
  console.log(message_type, payload)
  if (message_type === 'idCheck.applicantStatus' && payload.reviewStatus === 'completed') 
    { 
      router.push('/')
    }
}

However I the IDE complains that Property 'reviewStatus' does not exist on type 'AnyEventPayload'. Property 'reviewStatus' does not exist on type '{}'.ts(2339) Property 'reviewStatus' does not exist on type 'AnyEventPayload'. Property 'reviewStatus' does not exist on type '{}'.ts(2339)

When I hover over AnyEventPayload I get:

(alias) type AnyEventPayload = {} | {
    idDocSetType: string;
    types: string[];
    videoRequired?: string | undefined;
} | {
    idDocSetType: string;
} | {
    applicantId: string;
} | {
    reprocessing: boolean;
    levelName: string;
    creationDate: string;
    expireDate: string;
    reviewStatus: string;
    autoChecked: boolean;
} | {
    ...;
} | {
    ...;
} | {
    ...;
} | SnsError
import AnyEventPayload

reviewStatus is there so I don't understand why it's complaining or How can I fix this error?

Answer 1

AnyEventPayload is a union type (which means that it might be any of those type variations between the union operators ( | ). Because of this, the reviewStatus property name might not be a part of the type, so in order to safely check that the payload value is of the type that includes that property, you can use the in operator to narrow the type to that specific variation. To do so, you just need to precede the equality check which accesses the property with an expression using the in operator so that TS can be sure that the property exists before trying to access it and compare its value:

TS Playground

if (
  message_type === 'idCheck.applicantStatus'
  // Add the following check to ensure that the property exists in the object
  && 'reviewStatus' in payload
  && payload.reviewStatus === 'completed'
) router.push('/');