Назад к задачам
СБЕРПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
5
Корректно типизировать передаваемый в контейнер компонент
Компании, где спрашивали:
Условие задачи
При использовании компонента OtherFC в качестве значения свойства Component у ContainerFc TypeScript должен подсвечивать и предлагать остальные свойства, которые можно передать в ContainerFc помимо его собственных, с точным указанием их типов.
import { FC } from "react";
type OtherProps = {
name: string;
age: number;
};
const OtherFC: FC<OtherProps> = ({ age, name }) => {
return (
<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="Макс" age={30} />;
};
/** Здесь должны появляться ошибки типизации */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AnyComponent2 = () => {
return <ContainerFc height={5} Component={OtherFC} name={30} age="Макс" />;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AnyComponent3 = () => {
return <ContainerFc height={5} Component={OtherFC} role="Макс" />;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AnyComponent4 = () => {
return <ContainerFc height={5} Component={OtherFC} name="Макс" />;
};