Корректировка типизации компонентов

Условие

При передаче компонента OtherFC в свойство Component компонента ContainerFc TypeScript должен подсказать, какие дополнительные свойства можно передать в ContainerFc помимо его собственных, с точным указанием их типов.

 import { FC } from "react";

type OtherProps = {
    name: string;
    age: number;
};

const OtherFC: FC<OtherProps> = ({ age, name }) => {
    return (    I
    <div>
    {name} (age)
    </div>
    );
};

// Поправить типы в блоке ниже

/** Начало блока в котором можно редактировать и дополнять типы */

type IProps = {
    Component: any;
    height: number;
};

const ContainerFc: FC<IProps> = (props) => {
    const { Component, height } = props;

    return (
    <div style={{ height: '$(height)px' }}>
    <Component (...props) />
</div>
);
};
}
/** Конец блока в котором можно редактировать типы и дополнить типы */

/** Тут не должно быть ошибок типов */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AnyComponent1 = () => {
    return <ContainerFc height=(5) Component={OtherFC} name="Maxc" age=(30) />;

};

/** Тут должны быть ошибки типов */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AnyComponent2 = () => {
    return <ContainerFc height=(5) Component={OtherFC} name=(30) age="Maxc" />;

};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AnyComponent3 = () => {
    return <ContainerFc height=(5) Component={OtherFC} role="Maxc" />;

};

Ответ

Сделайте ContainerFc обобщённым по props переданного компонента, а собственные height и Component отделите от передаваемых вниз данных. Одних типов недостаточно: исходный JSX тоже повреждён.

import type { ComponentType } from 'react';
type ContainerProps<P extends object> = {
  Component: ComponentType<P>;
  height: number;
} & NoInfer<P>;
function ContainerFc<P extends object>(props: ContainerProps<P>) {
  const { Component, height, ...rest } = props;
  return <div style={{ height }}><Component {...(rest as P)} /></div>;
}

NoInfer требует TypeScript 5.4+ и не даёт неверным внешним props расширить P вместо контракта OtherFC. Имена height/Component здесь зарезервированы обёрткой и не должны входить в P; assertion при передаче rest опирается на это ограничение. Исправьте также height={5}, age={30}, {age}, лишний I и скобки. Тогда name="Maxc" age={30} допустимы, неверные типы и пропущенные обязательные поля — нет.