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);

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",
  });

  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

GamePaused

GameOver

GameOver

, I need to do some narrowing.

it seems like doing a

if (gameState().state !== "playing") { return } ... gameState().___

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 ?

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);

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",
  });

  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

GamePaused

GameOver

GameOver

, I need to do some narrowing.

it seems like doing a

if (gameState().state !== "playing") { return } ... gameState().___

if (gameState().state !== "playing") { return } ... gameState().___

type narrowing signals

Similar Threads

type narrowing signals

Similar Threads

Similar Threads

Similar Threads