A cheat sheet to React with TypeScript, on how to extend props with props from the usage scope.

typescript-extended-props-with-generics.tsx

type ComponentWithGenericPropertiesBaseWithoutGeneric = {
  baseValue: string;
};

type ComponentWithGenericPropertiesBase<T> = T extends infer T
  ? T & ComponentWithGenericPropertiesBaseWithoutGeneric
  : ComponentWithGenericPropertiesBaseWithoutGeneric;

type ComponentWithGenericPropertiesFirstUnion = {
  valueFromFirstUnion: string;
  secondValueFromFirstUnion?: string;
  valueFromSecondUnion?: never;
  secondValueFromSecondUnion?: never;
};

type ComponentWithGenericPropertiesSecondUnion = {
  valueFromFirstUnion?: never;
  secondValueFromFirstUnion?: never;
  valueFromSecondUnion: string;
  secondValueFromSecondUnion?: string;
};

type ComponentWithGenericProperties<T> = ComponentWithGenericPropertiesBase<T> &
  (
    | ComponentWithGenericPropertiesFirstUnion
    | ComponentWithGenericPropertiesSecondUnion
  );

const ComponentWithGeneric = <T extends object>({
  baseValue,
  valueFromFirstUnion,
  secondValueFromFirstUnion,
  valueFromSecondUnion,
  secondValueFromSecondUnion,
}: ComponentWithGenericProperties<T>) => {
  return <></>;
};

const ComponentToPerformTests = () => {
  return (
    <>
      <ComponentWithGeneric<{ exampleAnotherProperty: string }>
        exampleAnotherProperty=""
        baseValue=""
        valueFromFirstUnion=""
      />
      <ComponentWithGeneric<{ test: string }>
        test=""
        baseValue=""
        valueFromFirstUnion=""
      />
      <ComponentWithGeneric baseValue="" valueFromFirstUnion="" />
    </>
  );
};