@markelov69

Как сделать продвинутый типизированный Generic для компонента React таблицы?

Всем привет, вопрос такой, есть интерфейс ITableColumn, нужно чтобы его функция render была типизирована строго в зависимости от того, какой ключ указан в key.

interface IData {
    name: string;
    age: number;
    id: string;
}

const data: IData[] = [];

interface ITableColumn<DataInterface extends object, Key extends keyof DataInterface = keyof DataInterface> {
    key: Key;
    title: React.ReactNode;
    hasSort?: boolean;
    render?: (item: DataInterface[Key]) => React.ReactNode;
}

const columns: ITableColumn<IData>[] = [
    {
        key: 'id',
        title: 'ID',
    },
    {
        key: 'name',
        title: 'Name',
        // Нужно чтобы Item был - string, а не string | number
        render: (item) => <b>{item}</b>,
    },
    {
        key: 'age',
        title: 'Age',
        // Нужно чтобы Item был - number, а не string | number
        render: (item) => <b>{item}</b>,
    },
]
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
Aetae
@Aetae Куратор тега TypeScript
Тлен
Надо явно создать union:
type ITableColumn<
  DataInterface extends object, 
  Keys extends keyof DataInterface = keyof DataInterface
> = {
  [K in Keys]: {
    key: K;
    title: React.ReactNode;
    hasSort?: boolean;
    render?: (item: DataInterface[K]) => React.ReactNode;
  }
}[Keys];
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы