SolidJSS
SolidJS•3y ago•
15 replies
jack

type narrowing signals

I've got some state (I'm making a card game) that looks like 
type GameInProgress = {
  state: "playing" | "paused";
  p1Flipped: boolean;
  p2Flipped: boolean;
};

type GameOver = {
  state: "over";
};

type GamePaused = {
  state: "paused";
  p1Flipped: true;
  p2Flipped: true;
};

type Game = {
  state: "playing" | "paused" | "over";
} & (GameInProgress | GamePaused | GameOver);

and then my signal to track game state ends up looking like 
  const [gameState, setGameState] = createSignal<Game>({
    state: "over",
  });


over time, i want to update this object. since i'm using discriminated types, if i want to reason about any of the props that only exist on GamePaused or GameOver, I need to do some narrowing.

it seems like doing a if (gameState().state !== "playing") { return } ... gameState().___ doesn't successfully autocomplete. I'm assuming that typescript doesn't have enough info to guarantee that the 2nd getter invocation will be equivalent to that of the first.

Next reasonable idea is to invoke the getter once and store in a variable, then use that to type narrow. But then when I do a setGameState(...) using that variable, I'm not following the nested reactivity pattern here https://www.solidjs.com/tutorial/stores_nested_reactivity

Any thoughts/best practices here ?
Was this page helpful?