Назад к задачам
Junior — Senior
10

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

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

При передаче компонента 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" />;

};