Проблема с методом универсального интерфейса TypeScript

Вы не определяете общий интерфейс.
Это должно быть что-то вроде:

export interface Column<T> {
    name: string
    index: string
    columns?: Column<T>[]
    formatter?: (cell: T) => T
}

export const listOfEmployeesColumns: Column<string>[] = [
    {
        name: "Hire date",
        index: "hire_date",
        formatter: (cell: string) =>  cell.replace("-", "/")
    }
]

Единственный способ, которым это может работать, — это если Column является общим по типу T данных, которые он представляет (тип параметра и возвращаемое значение formatter). Вы не хотите, чтобы formatter был универсальным методом. Это означало бы, что вызывающая сторона может выбрать аргумент типа. Поскольку вам нужно, чтобы разработчик выбрал аргумент типа, это означает, что сам Column должен быть универсальным.

Кроме того, в соответствии с вашим вариантом использования, оно также по существу является универсальным по типу K свойства index, поскольку это свойство должно совпадать с ключом соответствующих данных... и T должно соответствовать типу свойства в этом ключе.

Имея это в виду, вот возможное определение Column:

interface Column<K extends PropertyKey, T> {
    name: string
    index: K
    columns?: T extends object ? readonly ColumnForProps<T>[] : never;
    formatter?: (cell: T) => T
}

type ColumnForProps<T extends object> =
    { [K in keyof T]-?: Column<K, T[K]> }[keyof T]

Обратите внимание, что это фактически рекурсивное определение. Свойство columns является условным типом . Если тип T сам по себе является объектом, то columns должен быть массивом объектов Column для каждого свойства T. (Я использую массив только для чтения , который более разрешителен, чем изменяемый массив.) Если T не является объектом, то columns является необязательным свойством невозможного никогда не вводить, что означает, что если T не является объектом, у вас не должно быть определенного свойства columns для Column<K, T>.

Тип ColumnForProps<T> — это тип распространяемого объекта (как он создан в microsoft/TypeScript#47109 ), который становится объединениемColumn<K, T[K]> для каждого K в keyof T. Итак, если T — это {a: A, b: B}, то ColumnForProps<T> — это Column<"a", A> | Column<"b", B>.

Это также означает, что Table должно быть общим по типу T элементов свойства rows, например:

const Table = <T extends object>(
    { rows, columns, index = false, handleCreate = undefined }: {
        rows: readonly T[],
        columns: readonly ColumnForProps<T>[],
        index?: boolean,
        handleCreate?: () => void
    }
) => (null!); // <-- not worried about implementation

Обратите внимание, что я удалил реализацию, поскольку она нас здесь не интересует, а реальная реализация, по-видимому, должна быть рекурсивной, и я не хочу отклоняться от темы.

Итак, когда вы вызываете Table, TypeScript должен вывести T из типа элемента свойства rows, а затем использовать его, чтобы потребовать, чтобы columns был массивом объектов ColumnForProps<T>.

Давайте проверим это:

const listOfEmployeesColumns = [
    {
        name: "Salary",
        index: "salary",
        formatter: (cell: number) => cell * 0.23
    },
    {
        name: "Hire date",
        index: "hire_date",
        formatter: (cell: string) => cell.replace("-", "/")
    }
] as const;

const listOfEmployees = [
    {
        "salary": 7000,
        "hire_date": "2020-01-15"
    },
    {
        "salary": 11000,
        "hire_date": "2018-07-01"
    }
];

<Table
    rows = {listOfEmployees} // okay
    columns = {listOfEmployeesColumns} // okay
/>

Это работает без ошибок. Обратите внимание, что мне пришлось использовать константное утверждение в инициализаторе listOfEmployeesColumns, чтобы TypeScript отслеживал литералы типов свойств index. В противном случае TypeScript выведет string, чего недостаточно для проверки соответствия listOfEmployeesColumnslistOfEmployees.

Если мы напишем список встроенным, то нам не понадобится утверждение const, потому что TypeScript знает, что нужно обращать внимание на литеральные типы index:

<Table
    rows = {listOfEmployees}
    columns = {[
        {
            name: "Salary",
            index: "salary",
            formatter(cell) { return cell - 1 }
        },
        {
            name: "Hire date",
            index: 'hire_date',
            formatter(cell) { return cell.toUpperCase() }
        }
    ]}
/>

Вы можете видеть, что TypeScript будет жаловаться, если вы попытаетесь использовать index, которого он не ожидает:

<Table
    rows = {listOfEmployees}
    columns = {[
        { name: "Salary", index: "salary" },
        { name: "Hire date", index: 'hire_date' },
        { name: "Oops", index: 'oops' } // error!
        //              ~~~~~ <-- Type '"oops"' is not 
        // assignable to type '"salary" | "hire_date"'.
    ]}
/>

Или, если вы поругаетесь formatter:

<Table
    rows = {listOfEmployees}
    columns = {[
        { name: "Salary", index: "salary" },
        {
            name: "Hire date", index: 'hire_date',
            formatter(cell: number) { return cell + 1 }
        }, // error!
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        // Types of property 'formatter' are incompatible.
    ]}
/>

Надеемся, что это должно оправдать необходимость того, чтобы Column было общим и для типа index, поскольку именно это свойство управляет ожидаемым типом formatter.

Наконец, поскольку Column рекурсивно, давайте посмотрим, что произойдет, если rows содержит вложенные объекты:

<Table
    rows = {[{ a: { b: "abc" } }, { a: { b: "def" } }]}
    columns = {[
        {
            index: "a", name: "A", columns: [
                { index: "b", name: "B", formatter(cell) { return cell.toLowerCase() } }
            ]
        }
    ]}
/>

Выглядит хорошо. Тип элементов rows — {a: {b: string}}, и вы можете видеть, что TypeScript ожидает, что свойство columns элемента index: "a" будет столбцом index: "b", где formatter ожидает и возвращает значение string.

Детская площадка, ссылка на код