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

Empieza con el CodeSandbox enlazado y reproduce el ejemplo genérico de React, comparando los dos órdenes de Merge mostrados en el issue. Traza el recorrido de comprobación de tipos de TypeScript implicado; el trabajo estará terminado cuando una prueba de regresión cubra el orden que falla y la asignación indicada se comporte como se espera.