Conditional types - Why is Typescript confused about this array type?

Question

I've got a setup like so. The idea is that I want to accept a generic and an options shape, infer the options necessary from the generic and the type key of the options shape, and constrain the options appropriately.

type OptionProp<T extends string | boolean> = {
  defaultValue: T;
} & (T extends string
  ? { type: "select"; options: T[] } | { type: "text" }
  : { type: "checkbox" });

function useFixtureOption<T extends string>(
  name: string,
  prop: OptionProp<T>
): T {
  console.log(prop);
  return prop.defaultValue;
}

useFixtureOption<"foo" | "bar">("field", {
  type: "select",
  options: ["foo", "bar"],
  defaultValue: "foo",
});

However, Typescript is confused about my options type, defined as T[], and thinks that it's "foo"[] | "bar"[] rather than ("foo" | "bar")[]:

If I don't use a conditional type here, everything is fine:

type OptionProp<T extends string> = {
defaultValue: T;
} & ({ type: "select"; options: T[] } | { type: "text" });

But I want to be able to enforce that a boolean T requires type: checkbox and that text/select require a string T.

I feel like there's some subtlety of the type system that I'm missing here, but I have no clue where it is. My best guess is that the T extends string check is over-narrowing the type and producing a type option per member of the T union. Is that correct, and if so, how do I deal with it?

Playground link included!

Edit: I've apparently discovered distributed conditional types. F<A|B> = F<A> | F<B>, which makes sense as to why I'm seeing what I'm seeing now. Now, how to fix it?

Chris Heald · Accepted Answer · 2022-08-28 05:17:37Z

2

I've tracked this down. I've run into a feature called distributive conditional types which takes union and distributes it, resulting in a new type F<A|B> = F<A> | F<B>.

The fix is straightforward and from the manual:

Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.

type OptionProp<T = any> = ([T] extends [string]
  ? { type: "text" } | { type: "select"; options: T[] }
  : { type: "checkbox" }) & {
  defaultValue: T;
  value?: T;
};

answered Aug 28, 2022 at 5:17

Chris Heald

62.9k10 gold badges131 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

captain-yossarian from Ukraine Over a year ago

Upvoted! Btw, no need to use explicit generic parameter in useFixtureOption<"foo" | "bar">

Chris Heald Over a year ago

Not in this example, but it was included for clarity and because in my actual use case I want the options to be enforced by the type to make sure the IDE helps catch invalid options! :)

Collectives™ on Stack Overflow

Conditional types - Why is Typescript confused about this array type?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related