When evaluating whether a generic is assignable to a generic, it depends on the type order.

🔎 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://stackblitz.com/edit/stackblitz-starters-svbjkh?file=src%2Ftest.tsx&view=editor

💻 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 ReversedPP<P, E extends React.ElementType> = Merge<
  PropsWithAs<P, E>,
  React.ComponentPropsWithoutRef<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} />;
}

🙁 Actual behavior

// It doesn't works
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 & { as?: E }'.
// 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 AND conditional statement which type can be assigned to a type.
However, I think that if a type can be assigned, it must be evaluated like a OR conditional statement.
(When as is not assignable to Omit<PropsWithoutRef<ComponentProps<E>>, "as" | "color">, it returns false immediately but actually it is assignable to IntrinsicAttributes & Omit<PropsWithoutRef<ComponentProps<E>>, "as" | "color"> & Props & { as?: E } type.)

🙂 Expected behavior

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

function ExpectedBehavior<E extends React.ElementType = "div">({
  as,
  ...rest
}: ReversedPP<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 by reproducing the generic assignability error in the linked StackBlitz playground, focusing on Merge, PropsWithAs, PolymorphicProps, and the JSX calls shown in the issue. No repository file or test is identified in the report; done means explaining or correcting the order-dependent result so both merge orders have consistent assignability behavior.