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

Beginne damit, den generischen Zuweisbarkeitsfehler im verlinkten StackBlitz-Playground zu reproduzieren, wobei der Fokus auf Merge, PropsWithAs, PolymorphicProps und den im Issue gezeigten JSX-Aufrufen liegt. Im Bericht wird keine Repository-Datei und kein Test angegeben; abgeschlossen ist die Aufgabe, wenn das ergebnisabhängige Verhalten erklärt oder korrigiert wurde, sodass beide Merge-Reihenfolgen ein konsistentes Zuweisbarkeitsverhalten aufweisen.