Progress on using Discriminated Unions with Show and Switch/Match

[Braayy]

Hi! I've read some discussions here about the problem of using discriminated unions with Show and Switch/Match, but all of them are about 1yo, so i wanna ask if there is any progress on that.

If you don't know what i'm talking about, here is an example:

type Member {
  type: "member";
  name: string;
}

type Admin {
  type: "admin";
  name: string;
  email: string;
}

type User = Member | Admin;

function UserComponent(props: { user: User}) {
  return (
    <Switch>
      <Match when={props.user.type === "Member"}><p>{props.user.name}</p></Match>
      // We get an error on props.user.email, because TS couldn't narrow down props.user to be an Admin, so it stays as an User.
      <Match when={props.user.type === "Admin"}><p>{`${props.user.name} | ${props.user.email}`}</p></Match>
    </Switch>
  );
}

[mdynnl]

function UserComponent(props: { user: User }) {
  return (
    <Switch>
      <Match when={props.user.type === "member" && props.user} keyed>
        {(user) => <p>{user.name}</p>}
      </Match>
      <Match when={props.user.type === "admin" && props.user}>
        {(user) => <p>{user().name} | {user().email}</p>}
      </Match>
    </Switch>
  );
}

signal
store

[aellerton]

In case it helps others, note use of Extract:

<Switch fallback={<p>Unknown kind: {currentScene.kind}</p>}>
  <Match when={currentScene.kind === 'image-panel'}>
    <ImagePanelDisplay scene={currentScene as Extract<Scene, { kind: 'image-panel' }>} />
  </Match>
  <Match when={currentScene.kind === 'text-panel'}>
    <TextPanelDisplay scene={currentScene as Extract<Scene, { kind: 'text-panel' }>} />
  </Match>
  <Match when={currentScene.kind === 'video-clip-1'}>
    <VideoClip1Display scene={currentScene as Extract<Scene, { kind: 'video-clip-1' }>} />
  </Match>
</Switch>

Then the component can be defined with the narrowed type like:

export function ImagePanelDisplay(props: { scene: Extract<Scene, { kind: 'image-panel' }> }) {
  // within this, props.scene has the narrowed type that you'd expect
}