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

Question

[markelov69]

Всем привет, вопрос такой, есть интерфейс 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>,
    },
]

Answer 1

[Aetae]

Надо явно создать 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];

Comments

[WbICHA]

Или так:

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

[markelov69]

Спасибо большое! Работает как нужно!

[Aetae]

WbICHA, я знаю как это работает, но лучше не обращаться к чёрной магии если есть выбор.)

[WbICHA]

Aetae, ты просто боишься познать истинную силу!!! :D