Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
10
Корректировка типизации компонентов
Условие задачи
При передаче компонента 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" />;
};