React TypeScript中如何在两个props之间推断泛型类型

核心实现 #

你不需要定义固定的AnyGenericRow类型，而是把Props声明为带泛型参数的接口，让TS自动从data属性的传入值推断行类型，再关联到onRow的回调参数：

// T 是动态的行类型泛型参数
interface Props<T> {
  data: T[];
  onRow: (row: T) => void;
}

对应React函数组件的泛型写法如下（TSX中泛型箭头函数需要加逗号避免和JSX标签语法冲突）：

const Component = <T,>(props: Props<T>) => {
  // 组件内部逻辑
  return <></>
}

使用效果验证 #

按照你给出的示例使用时，row会自动被推断为对应类型：

const rows: Array<{ foo: 'bar' }> = [];

<Component 
  data={rows} 
  onRow={row => { 
    // row 会被自动识别为 { foo: 'bar' } 类型，TS会给出对应的属性提示
    console.log(row.foo) // 无类型报错
  }}
/>

附加问题解答 #

泛型行类型扩展接口 #

如果需要约束泛型行类型必须满足某个基础接口的结构，直接给泛型参数加extends约束即可：

// 定义所有行必须满足的基础接口
interface BaseRow {
  id: number;
}

// 约束泛型T必须继承BaseRow
interface Props<T extends BaseRow> {
  data: T[];
  onRow: (row: T) => void;
}

如果需要在组件内部给行类型拼接额外的属性，确实可以用&运算符实现：

// 给原行类型扩展内部使用的checked属性
type InternalRow<T> = T & { checked: boolean };

内容的提问来源于stack exchange，提问作者Magnus Bull