Вопрос с собеседования · Frontend

Как написать дженерик-компонент и типизировать контекст с проверкой провайдера?

MiddleTypeScript
Ещё спрашивают так:
  • Как сделать типизированный компонент списка или таблицы?
Коротко

Дженерик-компонент получает параметр типа из данных: function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }) — внутри render тип элемента известен без приведений. Ограничение — T extends { id: string }, если нужен ключ. Контекст создают с null по умолчанию и пишут хук-обёртку, который бросает понятную ошибку без провайдера и возвращает не-null тип: потребителям не нужны проверки на null.

  • В .tsx запись <T,> помогает отличить дженерик от тега у стрелочных функций
  • Тип строки таблицы выводится из переданных данных
  • Ошибка «useX must be used within XProvider» экономит часы отладки

А ещё as any внутри компонента сводит пользу дженерика на нет

Подробно

const AuthCtx = createContext<Auth | null>(null);
export function useAuth() {
  const ctx = useContext(AuthCtx);
  if (!ctx) throw new Error("useAuth: нет AuthProvider выше по дереву");
  return ctx;   // тип Auth
}
function Select<T extends { id: string }>({ options, value, onChange, label }: SelectProps<T>) { ... }

Что хотят услышать

  • Параметр типа из данных.
  • Ограничения extends.
  • Контекст с null и проверяющий хук.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Дженерик-компоненты в React не поддерживаются
  • ✗Контекст правильно создавать с пустым объектом {} as Auth, чтобы не проверять null
  • ✓Тип выводится из props, ограничение — extends; контекст с null оборачивают хуком с проверкой
  • ✗Внутри дженерик-компонента приводят всё к any

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования