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

Корректно типизировать передаваемый в контейнер компонент

Компании, где спрашивали:

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

При использовании компонента 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="Макс" />;
};