Глубокий ключ вложенного объекта в машинописном тексте

Поскольку вас волнует тип ввода cell/footer и тип вывода accessor, вам следует рассмотреть возможность добавления общего параметра типа 🔁 в Column для этого типа:

type Column<T, V> = {
  header: string | (() => ReactElement);
  accessor: (row: T) => V;
  cell?: (prop: V) => ReactElement | string;
  footer?: (prop: V) => ReactElement | string;
};

Тогда значение, возвращаемое createColumnHelper<T>(), должно иметь метод accessor, который либо принимает значение типа K extends keyof T и выдает Column<T, T[K]>, либо принимает значение типа (row: T) => V для некоторых V и выдает Column<T, V>. Это выглядит так:

const createColumnHelper = <T,>() => {
  // call signatures
  function accessor<K extends keyof T>(
    accessor: K, column: Omit<Column<T, T[K]>, "accessor">
  ): Column<T, T[K]>;
  function accessor<V>(
    accessor: (row: T) => V, column: Omit<Column<T, V>, "accessor">
  ): Column<T, V>;

  // implementation
  function accessor(
    accessor: keyof T | ((row: T) => any), column: Omit<Column<T, any>, "accessor">
  ): Column<T, any> {
    return {
      header: column.header,
      accessor: (row: T) => (typeof accessor === "function" ? accessor(row) : row[accessor]),
      cell: column.cell,
      footer: column.footer,
    };
  }
  return { accessor };
};

Обратите внимание, что я использую Пропустить, чтобы легко описать Column, у которого отсутствует свойство accessor. Это не обязательно, но позволяет сэкономить время на написании {header: ⋯, cell?: ⋯, footer?: ⋯}. Это устраняет проблему, с которой вы столкнулись:

const columns = [
  columnHelper.accessor(
    'firstName', {
    header: 'First Name',
    cell: val => val,
  }),
  columnHelper.accessor(
    'progress', {
    header: 'Progress',
    cell: prop => String(prop.ok), 
  }),
  columnHelper.accessor(row => row, {
    header: () => <span>Age</span>,
    cell: prop => <span>{prop.age}</span>,
  }),
];

(и обратите внимание, что мне пришлось исправить ошибку, поскольку prop.ok — это не string или ReactElement.)

Это отвечает на заданный вопрос, но если вы это сделаете, у вас возникнут проблемы с column.cell ? column.cell(column.accessor(row)) : column.accessor(row) и тому подобным. Единственная причина, по которой раньше это работало, заключается в том, что column.cell() принимает any. Теперь это не так. И TS не может проверить это как действительное из-за нескольких высказываний column типа объединения. Это ms/TS#30581 более или менее, и исправления для него выходят за рамки этого вопроса.

Самый простой вариант — потребовать, чтобы columnHelper.accessor(a, o) входные данные выглядели как Omit<Column<T, T[K]>, "accessor"> или Omit<Column<T, V>, "accessor">, но возвращали Column<T, any>:

const createColumnHelper = <T,>() => {
  // call signatures
  function accessor<K extends keyof T>(
    accessor: K, column: Omit<Column<T, T[K]>, "accessor">
  ): Column<T, any>;
  function accessor<V>(
    accessor: (row: T) => V, column: Omit<Column<T, V>, "accessor">
  ): Column<T, any>;

  // implementation
  function accessor(
    accessor: keyof T | ((row: T) => any), column: Omit<Column<T, any>, "accessor">
  ): Column<T, any> {
    return {
      header: column.header,
      accessor: (row: T) => (typeof accessor === "function" ? accessor(row) : row[accessor]),
      cell: column.cell,
      footer: column.footer,
    };
  }
  return { accessor };
};

Это облегчит сопоставление, но проблема any в выводе все еще сохраняется:

columns[0].cell?.(1) // no error

Вероятно, это должно привести к ошибке «number не может быть присвоено {ok?: number, no?: string}». Но это не так. Ну ладно, вы не спрашивали об этом, и исправление этого потребовало бы еще большего рефакторинга.

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