> Что такое generics в TypeScript и как они помогают создавать переиспользуемые компоненты? (TypeScript)

Короткий ответ

Generics в TypeScript - это механизм, позволяющий создавать компоненты, функции и типы, которые работают с разными типами данных, сохраняя при этом строгую типизацию. Они помогают избежать дублирования кода и обеспечивают type safety, используя параметры типа (например, <T>), которые подставляются конкретным типом при использовании компонента.

Подробное объяснение

Generics (обобщения) решают проблему, когда нужно написать функцию или класс, работающий с разными типами, но при этом сохранить информацию о конкретном типе. Без generics пришлось бы использовать any, что теряет типизацию, или писать отдельные реализации для каждого типа.

Основная идея: мы объявляем параметр типа (обычно T, но можно любое имя), который становится placeholder для реального типа. При вызове функции или создании экземпляра класса TypeScript автоматически выводит конкретный тип или мы указываем его явно.

Generics работают с функциями, классами, интерфейсами и типами. Они позволяют создавать переиспользуемые утилиты, такие как Array<T>, Promise<T>, или кастомные обёртки.

На практике

На фронтенде generics особенно полезны для:

• Типизации API-ответов и обработчиков данных
• Создания переиспользуемых React-компонентов с разными пропсами
• Написания хелперов для работы с массивами и объектами
• Типизации стейт-менеджмента (Redux, Zustand)

Пример: функция, которая принимает массив элементов и возвращает первый элемент, должна сохранять тип элемента, а не возвращать any. Generics решают это элегантно.

Пример кода

TYPESCRIPT
// Базовая generic-функция
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstElement([1, 2, 3]); // тип number
const str = firstElement(['a', 'b']); // тип string

// Generic-интерфейс для ответа API
interface ApiResponse<T> {
  data: T;
  status: number;
  error?: string;
}

// Использование с конкретным типом
type User = { id: number; name: string };
const response: ApiResponse<User> = {
  data: { id: 1, name: 'Alice' },
  status: 200
};

// Generic-компонент в React (упрощённо)
function List<T>({ items, render }: { items: T[]; render: (item: T) => React.ReactNode }) {
  return <ul>{items.map(render)}</ul>;
}

// Использование
<List items={[1, 2, 3]} render={(item) => <li>{item}</li>} />

Как отвечать на собеседовании

Начни с простого определения: generics позволяют писать код, который работает с разными типами, но сохраняет типизацию. Приведи пример с функцией, которая принимает массив и возвращает элемент - покажи разницу между any и generic. Упомяни, что TypeScript выводит тип автоматически, но можно указать явно: firstElement<string>(['a']). Если спросят про ограничения, скажи про extends для сужения допустимых типов.

Что проверяет интервьюер

• Понимание разницы между any и generics
• Умение объяснить, как параметры типа работают на уровне компиляции
• Знание синтаксиса: <T>, множественные параметры <T, U>, ограничения <T extends SomeType>
• Способность применить generics к реальным задачам (API, компоненты)

Типичные ошибки

• Путать generics с any - это противоположные концепции
• Забывать, что generic-тип может быть выведен автоматически, и писать лишние аннотации
• Использовать generics там, где достаточно конкретного типа (overengineering)
• Не использовать ограничения (extends), когда нужно гарантировать наличие определённых свойств у типа