Type narrowing with TypeScript is a big hassle

[jmagaram]

I've gotten very excited about using SolidJS because of fewer abstractions, closer to DOM, Web component support, and performance. And so I tried building a basic web site this morning and very very quickly ran into a very awkward problem with TypeScript. I use discriminated unions all over the place like this below. Many of these union types have multiple options and sub-options especially if used to describe the UI state of a page. These kinds of data types are very common in functional programming.

type User =
  | { tag: "admin"; privileges: number[] }
  | { tag: "user"; userName:string; avatar: string };

type AuthStatus = { tag: "anonymous" } | { tag: "signedIn"; user: User };

type AuthStatus_SignedIn_Admin = AuthStatus & {
  tag: "signedIn";
  user: User & { tag: "admin" };
};

It seems the only way to write a component that displays a User is to use Show and Switch and then in the narrowed JSX scope I must cast each instance to something like (user() as AuthStatus_SignedIn_Admin).privileges. If I'm using the narrowed value a lot, I can (must) write a wrapper component that takes a props with the type AuthStatus_SignedIn_Admin and then cast it once when passing it to that component. This is all a big hassle and ugly.

In React I would just use the control flows built into javascript and get automatic type narrowing like this below. No need to manually define narrowed types or write separate helper components.

const View = (u: User) =>
  u.tag === "admin" ? "Hi admin" : `Hi ${u.userName} ${u.avatar}`;

The documentation says there is an alternate version of Show but it has severe performance penalties.

Is there a better solution to this problem I haven't considered? I'm wondering if using the Solid observables/rxjs would help. For DX I really think this should be addressed.

Here is a playground link

This seems related to #547

[jmagaram]

I wrote some code that seems to make it work a lot better. Below is a custom Switch component that takes the input and displays one of 2 different JSX functions, depending on the "type guards" provided. I don't need to define special types for each case of my discriminated union and don't need to do any ugly casts. I'm really confused though. Maybe this is similar to the version of Show where the docs say...

Note, however, that this form of Show forces the entirety of the children to render from scratch every time name() changes, instead of doing this just when name() changes from a falsy to a truthy value. This means that the children don't have the full benefits of fine-grained reactivity (re-using unchanged parts and updating just what changed).

function Switch2<INPUT, A extends INPUT, B extends INPUT>(props: {
  value: INPUT;
  isA: (i: INPUT) => A | undefined;
  asA: (a: A) => JSXElement;
  isB: (i: INPUT) => B | undefined;
  asB: (b: B) => JSXElement;
  fallback: JSXElement;
}) {
  return (
    <Switch fallback={props.fallback}>
      <Match when={props.isA(props.value) !== undefined}>
        {props.asA(props.value as A)}
      </Match>
      <Match when={props.isB(props.value) !== undefined}>
        {props.asB(props.value as B)}
      </Match>
    </Switch>
  );
}

And here is how I can use it. It seems to work and TypeScript helps out. So in the case of the signed in user I can access the userName but not when anonymous.

export type AuthStatus =
  | { tag: "anonymous" }
  | { tag: "signedIn"; userName: string };

export const AuthGreeting = (props: AuthStatus) =>
  Switch2({
    value: props,
    isA: (i) => (i.tag === "anonymous" ? i : undefined),
    asA: (i) => "Stranger",
    isB: (i) => (i.tag === "signedIn" ? i : undefined),
    asB: (i) => i.userName,
    fallback: "unexpected",
  });

[jmagaram]

I've tried writing a simpler helper component to do type narrowing but am having problems getting it to compile. It works fine when I use function syntax but if I call it using JSX syntax I get a TypeScript error. Very frustrating. Details in this discussion...

#1535

I did some experimenting in React and it turns out they have the same problem. TypeScript can do proper type narrowing when called using regular JS, but for some reason type narrowing doesn't work when using JSX syntax. But in React you can use JS control flow to create different UI based on the shape of your data so this isn't an issue.

I've been able to write components for Solid that help display discriminated unions using type narrowing BUT they only work (compile) when called using function syntax. So if I have a component called MyComponent, wherever I use it in JSX I need to display it like {MyComponent(param1, param2, ...)} not <MyComponent param1=... param2=.../>

[jmagaram]

Ok it seems like nobody cares about this due to lack of comments. But to me it seemed somewhat impossible or very cumbersome to display complex discriminated union, choice-type data structures, like what you'd get with XState, Either (error vs ok), Option. So this was going to be a deal killer for me to use SolidJS. And it was a lot harder in SolidJS than in React. I did a bunch of Googling and found this very recent article about functional programming with SolidJS. I think the library TS-Pattern seems like a very good solution. The article toward the very end shows complex examples of using this library for making JSX without the limitations of Show and Switch. I just started experimenting with it. Here is a very simple solution for how it can work. I don't see any ESLint errors. You get auto-complete when filling in the pattern matching expressions, and get warnings if you've missed cases. If this really works maybe the docs around control flow or TypeScript should refer to this. One thing that I don't understand from my experiments is sometimes I think you have to embed these using expressions like {.....} rather than JSX <.....>; I read about prop restructuring being tricky so maybe that is the issue.

import { createSignal, JSXElement, Match, Switch } from "solid-js";
import { match as tsMatch } from "ts-pattern";

type Person =
  | { tag: "user"; name: string }
  | { tag: "anonymous" }
  | { tag: "admin"; title: string };

const [person, setPerson] = createSignal<Person>({ tag: "anonymous" });

export const FriendlyGreeting = (props: Person): JSXElement =>
  tsMatch(props)
    .with({ tag: "user" }, (r) => r.name)
    .with({ tag: "anonymous" }, (_) => "stranger")
    .with({ tag: "admin" }, (a) => `Hi ${a.title}`)
    .exhaustive();

[jmagaram]

Here is a more comprehensive example...

import { createSignal, JSXElement, Match, Switch } from "solid-js";
import { match as tsMatch } from "ts-pattern";

type User =
  | { tag: "anonymous" }
  | { tag: "user"; name: string }
  | { tag: "admin"; email: string };

const ViewA = (props: User) => (
  <Switch>
    <Match when={props.tag === "anonymous"}>Hello stranger!</Match>
    <Match keyed when={props.tag === "user" ? props : false}>
      {(i) => `Hello ${i.name}`}
    </Match>
    <Match keyed when={props.tag === "admin" ? props : false}>
      {(i) => `Hello admin at ${i.email}`}
    </Match>
  </Switch>
);

const ViewB = (props: User) => (
  <Switch>
    <Match when={props.tag === "anonymous"}>Hello stranger!</Match>
    <Match when={props.tag === "user"}>
      {`Hello ${(props as User & { tag: "user" }).name}`}
    </Match>
    <Match when={props.tag === "admin"}>
      {`Hello admin at ${(props as User & { tag: "admin" }).email}`}
    </Match>
  </Switch>
);

const ViewC = (props: User) => (
  <>
    {tsMatch(props)
      .with({ tag: "anonymous" }, () => "Hello stranger!")
      .with({ tag: "user" }, (i) => `Hello ${i.name}`)
      .otherwise((i) => `Hello ${i.email}`)}
  </>
);

[snatvb]

really thanks for your solutions

[tsujp]

For others discovering this only on GitHub: there is an associated discussion on SolidJS' Discord, here: https://discord.com/channels/722131463138705510/1074415945986080808/1074415948137758750

You will lose the performance benefits of SolidJS' <Show> if you use ts-pattern shown in this GitHub discussion because it constructs the child component to render via a callback which will always be invoked (re-created) rather than updated in-place via SolidJS' reactivity. See the last paragraph in the linked section from the SolidJS docs here: https://www.solidjs.com/guides/typescript#control-flow-narrowing

In the Discord thread @jmagaram provides a type-aware narrowing pattern which also keeps the performance benefits of <Show> et al.

I think this is important stuff since this feels very hard to do nicely in SolidJS versus React. Ryan also weighed in on the Discord thread about upcoming changes in SolidJS 2 (semver major version 2) and why he couldn't make such a breaking change (which would accommodate this) right now as it would.. well be a breaking change for semver (SolidJS is currently on major version 1).

[a-viv-a]

Sorry to necrobump (and someone may have come up with this in discord) but I found this discussion from a search, and ended up with the following utility, which might be helpful to someone else (you could clean it up if you want):

const narrow = <A, B extends A>(accessor: Accessor<A>, guard: (v: A) => v is B): B | null => {
  const val = accessor()
  if (guard(val)) {
    return val
  }
  return null
}

and then when I use it as follows:

// ...
<Show when={narrow(result, v => 'msg' in v)}>{success =>
  <ShowSuccess success={success()} />
}</Show>
// ...

the combo of using the show function, and having a conditional that returns the narrowed type or null seems to satisfy the type checker, since "msg" being a key in the result narrows it to a success type of the discriminated union. This probably has issues if the narrowed type includes null? Unsure.