TypeScript传递部分泛型时如何自动推断Accessor对应参数类型？

要实现仅传入Row泛型时自动根据accessor键推断对应value类型，同时保留手动指定accessor类型的能力，可以通过调整TypeScript泛型的定义方式来实现，以下是两种可行方案：

方案1：优化泛型类型定义 #

通过给泛型参数设置默认值并利用联合类型自动缩小范围，让TypeScript在仅传入Row时自动根据accessor的具体值推断value类型：

// 定义ColumnConfig泛型，K默认是Row的所有键，支持手动指定
type ColumnConfig<Row, K extends keyof Row = keyof Row> = {
  accessor: K;
  render: (value: Row[K]) => React.ReactNode;
};

// 示例Row类型
interface User {
  id: number;
  name: string;
  age: number;
}

// 场景1：仅传入Row，自动推断value类型
const nameColumn: ColumnConfig<User> = {
  accessor: 'name',
  render: (value) => {
    // value自动推断为string
    return <span>{value.toUpperCase()}</span>;
  }
};

// 场景2：手动指定accessor类型（保留原有能力）
const idColumn: ColumnConfig<User, 'id'> = {
  accessor: 'id',
  render: (value) => {
    // value类型为number
    return value.toString();
  }
};

原理：当仅传入Row时，K默认是keyof Row（所有键的联合类型），但当你指定具体的accessor值时，TypeScript会自动将K缩小为该键的具体类型，从而让Row[K]精准对应到该键的值类型。

方案2：使用创建函数优化推断体验 #

如果觉得直接使用类型定义的推断不够直观，可以封装一个创建列的函数，利用函数泛型的自动推断特性，进一步简化使用：

type ColumnConfig<Row, K extends keyof Row> = {
  accessor: K;
  render: (value: Row[K]) => React.ReactNode;
};

function createColumn<Row, K extends keyof Row>(
  config: ColumnConfig<Row, K>
): ColumnConfig<Row, K> {
  return config;
}

// 使用示例
const ageColumn = createColumn<User>({
  accessor: 'age',
  render: (value) => {
    // value自动推断为number
    return `${value}岁`;
  }
});

// 手动指定accessor类型的场景依然支持
const idColumn = createColumn<User, 'id'>({
  accessor: 'id',
  render: (value) => value.toString()
});

这种方式下，函数会自动根据你传入的accessor值推断K的类型，无需手动指定，同时保留了手动指定K的灵活性。

内容的提问来源于stack exchange，提问作者Dan Lincoln