Narrowing setDiscriminatedValue setter parameter by discriminating discriminatedValue

[ellie-xpawn]

Would this type-narrowing behavior be possible to implement without making a breaking change?

type Uninitialized = {
  key: "uninitialized",
  value?: never
}

type Initialized = {
  key: "initialized",
  value: string
}

const stateAtom = atom<Uninitialized | Initialized>({
  key: "uninitialized"
});

...
// In some React component
const [state, setState] = useAtom(stateAtom);

if (state.key === "uninitialized") {
  setState((prev) => {
    // prev.key is "uninitialized" | "initialized", but
    // we already know it is "uninitialized"
  });
}

My use case for this would be conditionally rendering something (ie. a button) based on state.key and handling events (ie. onClick) by calling setState without needing a redundant switch statement:

function Page() {
  const [state, setState] = useAtom(stateAtom);
  // ...
  return (
    <div>
      {state.key === "initialized" &&
        <button onClick={
          // Behavior I want - currently using a switch statement to throw an error when state.key !== "initialized"
          () => setState((prev) => ({ ...prev, value: "value" }))
        }>
          Set value
        </button>
      }
    </div>
  )
}

[ellie-xpawn]

The solution is just using setState({ ...state, value: "value" }) and not setState((prev) => { ...prev, value: "value" })

[dmaskasky]

Using the callback approach is probably better and should be possible to get the narrowed type in TS.

[ellie-xpawn]

Ok. Knowing that it's possible, I'll try to make a PR over the weekend.

[dai-shi]

I don't think it's possible in TS in general.

[ellie-xpawn]

Yeah, I think you're right. I tried to make a proof-of-concept, but it doesn't seem possible to narrow types like this without correlated union types