When assigning a generic to a generic type prop, it is not evaluated like a set

🔎 Search Terms

generic

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about generic

⏯ Playground Link

https://codesandbox.io/s/ts-bugs-p9lrhh?file=/src/test.tsx

💻 Code

type Merge<T, U> = Omit<T, keyof U> & U;
type PropsWithAs<P, E extends React.ElementType> = P & { as?: E };
type PolymorphicProps<P, E extends React.ElementType> = Merge<
  React.ComponentPropsWithoutRef<E>,
  PropsWithAs<P, E>
>;
type Props = { color?: string };

function PolymorphicDiv<E extends React.ElementType>({ as }: { as?: E }) {
  const Tag = as ?? "div";
  return <Tag />;
}

function PolymorphicFlex<E extends React.ElementType = "div">({
  as,
  ...rest
}: PolymorphicProps<Props, E>) {
  return <PolymorphicDiv as={as} display="flex" {...rest} />;
}
function ExpectedBehavior<E extends React.ElementType = "div">({
  as,
  ...rest
}: PolymorphicProps<Props, E>) {
  return <PolymorphicFlex as={as} {...rest} />;
}

type PP<P, E extends React.ElementType> = Merge<
  PropsWithAs<P, E>,
  React.ComponentPropsWithoutRef<E>
>;

🙁 Actual behavior

// It works like `IntrinsicAttributes && Omit<PropsWithoutRef<ComponentProps<E>>, "as" | "color"> && Props && { as?: E }`
function ExpectedBehavior<E extends React.ElementType = "div">({
  as,
  ...rest
}: PolymorphicProps<Props, E>) {
  return <PolymorphicFlex as={as} {...rest} />;
}

// Error
// Type '{ as: E | undefined; } & Omit<PolymorphicProps<Props, E>, "as">' is not assignable to type 'IntrinsicAttributes & Omit<PropsWithoutRef<ComponentProps<E>>, "as" | "color"> & Props & { ...; }'.
// Type '{ as: E | undefined; } & Omit<PolymorphicProps<Props, E>, "as">' is not assignable to type 'Omit<PropsWithoutRef<ComponentProps<E>>, "as" | "color">'.

It seems to be evaluated like a && conditional statement which type can be assigned to a type.
However, if a type can be assigned, it must be evaluated like a set. (like a || conditional statement)
(When as is not assignable to Omit<PropsWithoutRef<ComponentProps<E>>, "as" | "color">, it returns false immediately but actually it is assignable to PolymorphicProps type.)

🙂 Expected behavior

// When reverse merge order, it works
type PP<P, E extends React.ElementType> = Merge<
  PropsWithAs<P, E>,
  React.ComponentPropsWithoutRef<E>
>;

function ExpectedBehavior<E extends React.ElementType = "div">({
  as,
  ...rest
}: PP<Props, E>) {
  return <PolymorphicFlex as={as} {...rest} />;
}

And I think it is bug, because when I reverse merge order (then TypeScript evaluate as is assignable to Omit<Props & { as?: E }, "color" | ...> & IntrinsicAttributes & PropsWithoutRef<ComponentProps<E>>) it works.

Additional information about the issue

No response

Start with the linked CodeSandbox and reproduce the generic React example, comparing the two Merge orders shown in the issue. Trace the TypeScript type-checking path involved; done means a regression test covers the failing order and the reported assignment behaves as expected.