Реагировать на дисперсию и назначение типов компонентов

Избегание JSX и использование React.createElement решает эту проблему.

declare namespace Props {
  interface Fruit {
    price: number;
  }

  interface Banana extends Fruit {
    curvature: number;
  }
}

declare const Fruit: React.FC<Props.Fruit>;
declare const Banana: React.FC<Props.Banana>;

// ✅ 
const one: React.ReactComponentElement<typeof Fruit> = React.createElement(
  Fruit,
  { price: 1000 }
);

// ✅
const two: React.ReactComponentElement<typeof Banana> = React.createElement(
  Banana,
  { price: 1000, curvature: 12 }
);

/**
 * ✅ Compile-time error.
 * Type 'FunctionComponentElement<Banana>' is not assignable to type
 * 'ReactComponentElement<FunctionComponent<Fruit>, Pick<PropsWithChildren<Fruit>, "price" | "children">>'.
 * ...
 * fruits.tsx(10, 5): 'curvature' is declared here.
 */
const three: React.ReactComponentElement<typeof Fruit> = React.createElement(
  Banana
);

/**
 * ✅ Compile-time error.
 * Type 'FunctionComponentElement<Fruit>' is not assignable to type
 * 'ReactComponentElement<FunctionComponent<Banana>,
 * ...
 * Types of property 'propTypes' are incompatible.