Можно ли средствами TypeScript ограничить поле key в конфигурации колонок только ключами из переданных данных?

Ограничение ключей в конфигурации колонок с помощью TypeScript

TypeScript позволяет строго типизировать конфигурацию колонок, чтобы поле key могло содержать только ключи из переданных данных. Это достигается с помощью дженериков и оператора keyof. Такой подход гарантирует, что вы не укажете несуществующее поле, что предотвращает ошибки на этапе компиляции.

Как это работает

Создайте обобщенный тип ColumnConfig<T>, где T — тип данных. Поле key должно быть keyof T. Затем функция, принимающая данные и конфигурацию колонок, использует дженерик для вывода типа данных.

type ColumnConfig<T> = {
  key: keyof T;
  title: string;
};

function renderTable<T>(data: T[], columns: ColumnConfig<T>[]) {
  // реализация
}

// Пример использования
const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 }
];

const columns: ColumnConfig<typeof users[0]>[] = [
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  // { key: 'email', title: 'Email' } // Ошибка: 'email' не существует в типе
];

renderTable(users, columns);

Применение на практике

Этот паттерн широко используется в UI-библиотеках (например, React Table, Ant Design Table) для создания типобезопасных таблиц. Он также полезен при работе с формами, где поля формы должны соответствовать ключам объекта данных.

Вывод

Используйте дженерики с keyof для ограничения ключей в конфигурации колонок. Это повышает типобезопасность кода, уменьшает количество ошибок и улучшает автодополнение в IDE. Особенно полезно в крупных проектах с множеством таблиц и форм.