I have an issue with type narrowing and I can’t get it to work.

The type of event.data is { id: string; } | { progress: number; } and not { id: string; }

Any idea what’s wrong?

Typescript Playground

const events = ['event1', 'event2'] as const

type EventName = (typeof events)[number]

type EventData = {
  event1: {
    id: string
  }
  event2: {
    progress: number
  }
}

type DemoEvent<T extends EventName> = {
  name: T
  data: EventData[T]
}

const createEvent = <TName extends EventName>(name: TName, data: string): DemoEvent<TName> => {
  return {
    name,
    data: JSON.parse(data) as EventData[TName],
  }
}

const isEventName = (name: string): name is EventName => {
  return events.includes(name as EventName)
}

const onMessage = (name: string, data: string) => {
  if (!isEventName(name)) {
    return
  }

  const event = createEvent(name, data)
  if (event.name === 'event1') {
    console.log(event.data)
  }
}