Можно ли создать Generic для React компонента?

Да, можно и это отличная практика

TypeScript Generics — это мощный инструмент типизации в React, который позволяет создавать гибкие, переиспользуемые компоненты с сохранением типобезопасности. В отличие от дженериков в функциях TypeScript, в React-компонентах их применение имеет некоторые особенности.

Основные способы создания Generic-компонентов

1. Использование дженериков в функциональных компонентах

Для функциональных компонентов используется следующий синтаксис:

// Объявление компонента с generic-параметром T
function GenericList<T>({
  items,
  renderItem,
}: {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}) {
  return <div>{items.map(renderItem)}</div>;
}

// Использование
interface User {
  id: number;
  name: string;
}

const App = () => {
  const users: User[] = [
    { id: 1, name: 'Анна' },
    { id: 2, name: 'Иван' },
  ];

  return (
    <GenericList
      items={users}
      renderItem={(user) => <div key={user.id}>{user.name}</div>}
    />
  );
};

2. Компоненты высшего порядка (HOC) с дженериками

// HOC, который добавляет дополнительные данные к пропсам
function withData<T, P extends object>(
  WrappedComponent: React.ComponentType<P & { data: T }>,
  fetchData: () => Promise<T>
) {
  return function EnhancedComponent(props: P) {
    const [data, setData] = React.useState<T | null>(null);

    React.useEffect(() => {
      fetchData().then(setData);
    }, []);

    if (!data) return <div>Загрузка...</div>;

    return <WrappedComponent {...props} data={data} />;
  };
}

// Использование
interface Product {
  id: string;
  title: string;
  price: number;
}

const ProductDisplay = ({ data }: { data: Product }) => (
  <div>{data.title} - {data.price} руб.</div>
);

const EnhancedProductDisplay = withData<Product, {}>(
  ProductDisplay,
  () => fetch('/api/product').then(res => res.json())
);

3. Generic-компоненты с ограничениями (Constraints)

// Компонент для работы только с объектами, имеющими id
function SortableTable<T extends { id: string | number }>({
  data,
  columns,
}: {
  data: T[];
  columns: Array<{
    key: keyof T;
    title: string;
    render?: (value: T[keyof T], item: T) => React.ReactNode;
  }>;
}) {
  const [sortedData, setSortedData] = React.useState(data);

  const handleSort = (key: keyof T) => {
    const sorted = [...sortedData].sort((a, b) => {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    });
    setSortedData(sorted);
  };

  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => (
            <th key={String(col.key)} onClick={() => handleSort(col.key)}>
              {col.title}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {sortedData.map(item => (
          <tr key={item.id}>
            {columns.map(col => (
              <td key={String(col.key)}>
                {col.render
                  ? col.render(item[col.key], item)
                  : String(item[col.key])}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Ключевые преимущества использования Generics в React

• Типобезопасность: TypeScript проверяет типы на этапе компиляции
• Гибкость: Один компонент может работать с разными типами данных
• Переиспользуемость: Универсальные компоненты для различных сценариев
• Автодополнение: IDE предоставляет подсказки на основе переданных типов
• Сокращение дублирования: Не нужно создавать отдельные компоненты для каждого типа

Важные нюансы и ограничения

Проблемы с JSX-синтаксисом

// ❌ Так не сработает
const MyComponent = <T>(props: { value: T }) => <div>{props.value}</div>;

// ✅ Правильный вариант
const MyComponent = <T,>(props: { value: T }) => <div>{props.value}</div>;
// Запятая после <T,> помогает парсеру отличить дженерик от JSX-тега

Проблемы с деструктуризацией

// ❌ TypeScript может потерять контекст типа
function Component<T>({ data }: { data: T }) {
  // data будет иметь тип 'unknown' или 'any' без дополнительных указаний
}

// ✅ Явное указание типа
function Component<T>({ data }: { data: T }) {
  const processed = data as T; // или использование type guards
}

Практические примеры использования

Гибкий компонент формы

interface FormField<T> {
  name: keyof T;
  label: string;
  type: 'text' | 'number' | 'email' | 'select';
  options?: string[];
}

function DynamicForm<T extends Record<string, any>>({
  data,
  fields,
  onChange,
}: {
  data: T;
  fields: FormField<T>[];
  onChange: (name: keyof T, value: any) => void;
}) {
  return (
    <form>
      {fields.map(field => (
        <div key={String(field.name)}>
          <label>{field.label}</label>
          {field.type === 'select' ? (
            <select
              value={data[field.name]}
              onChange={e => onChange(field.name, e.target.value)}
            >
              {field.options?.map(option => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
          ) : (
            <input
              type={field.type}
              value={data[field.name]}
              onChange={e => onChange(field.name, e.target.value)}
            />
          )}
        </div>
      ))}
    </form>
  );
}

Рекомендации по использованию

• Не злоупотребляйте: Используйте дженерики только когда действительно нужна гибкость
• Добавляйте ограничения: T extends помогает сузить возможные типы
• Документируйте сложные дженерики: Комментарии помогут другим разработчикам
• Тестируйте с разными типами: Убедитесь, что компонент работает корректно

Вывод: Generic-компоненты в React с TypeScript — мощный инструмент для создания гибких, типобезопасных и переиспользуемых компонентов. Они особенно полезны для библиотечных компонентов, компонентов высшего порядка и любых абстрактных компонентов, работающих с различными типами данных. Однако важно использовать их осмысленно, чтобы не усложнять код без необходимости.