I feel like this error makes no sense because I already access field by FeedTypes key. But it still complaining about properties does not exist.

One thing I can do is a strict equal like props.type === FeedTypes.CONVERSATION but as I mentioned before it really doesn’t make sense because I already access field by props.type:

export type ChatHeaderProps =
| {
      name: string;
      isVerified?: boolean;
      type: FeedTypes.CONVERSATION;
      lastSeenAt: string;
  }
| {
      name: string;
      isVerified?: boolean;
      type: FeedTypes.GROUP;
      members: number;
  };

const ChatHeader = (props: ChatHeaderProps) => {
    // another code here...

    const titles: Record<Exclude<FeedTypes, 'user'>, string> = {
        conversation: `last seen ${getRelativeTimeString(new Date(props.lastSeenAt), 'en-US')}`,
        group: `${props.members} members`,
    }

    return (
       // another jsx here
      <Typography as='p' variant='secondary'>
        {titles[props.type]}
      </Typography>            
    );
};

export default ChatHeader;

Here is error:

Property 'lastSeenAt' does not exist on type 'ChatHeaderProps'.
  Property 'lastSeenAt' does not exist on type '{ name: string; isVerified?: boolean | undefined; type: FeedTypes.GROUP; members: number; }'.

Property 'members' does not exist on type 'ChatHeaderProps'.
  Property 'members' does not exist on type '{ name: string; isVerified?: boolean | undefined; type: FeedTypes.CONVERSATION; lastSeenAt: string; }'.