type UnionType = { type: 'Empty' } | { type: 'Data', value: number };

const App: Component = () => {
  const [state, setState] = createStore<UnionType>({ type: 'Empty' });
  return <>
    <button onClick={_ => setState({ type: 'Data', value: Math.random() })}>Set Data</button>

    <Switch>
      <Match when={state.type === 'Empty'}>
        <h3>Empty</h3>
      </Match>
      <Match when={state.type === 'Data' && state}>
        {state => <h3>Data value: {state().value}</h3>}
      </Match>
    </Switch>
  </>
};

type UnionType = { type: 'Empty' } | { type: 'Data', value: number };

const App: Component = () => {
  const [state, setState] = createStore<UnionType>({ type: 'Empty' });
  return <>
    <button onClick={_ => setState({ type: 'Data', value: Math.random() })}>Set Data</button>

    <Switch>
      <Match when={state.type === 'Empty'}>
        <h3>Empty</h3>
      </Match>
      <Match when={state.type === 'Data' && state}>
        {state => <h3>Data value: {state().value}</h3>}
      </Match>
    </Switch>
  </>
};