TypeScript中如何让父类型的onSelect参数自动关联自身children的id字面量类型？

当然可以实现这种需求！你想要的其实是让TypeScript根据传入的children自动推导出onSelect参数的字面量联合类型，核心思路是用泛型来关联组件的children和onSelect类型，而不是用固定的类型定义。

你之前的写法里，child类型的id被固定为string，所以parent的onSelect参数只能是宽泛的string类型，无法捕获具体的字面量。而泛型可以帮我们在定义组件类型时，动态捕获传入的children中所有id的具体类型，再把这个类型关联到onSelect上。

具体实现代码 #

首先定义子组件的props类型，这里我们用泛型来约束id的具体字面量：

import type { ReactElement } from 'react';

// 子组件props：用泛型ID约束id的字面量类型
type ChildProps<ID extends string> = {
  id: ID;
  // 其他自定义属性...
};

接着定义父组件的props，同样用泛型T来捕获所有子组件id的联合类型：

// 父组件props：泛型T对应所有子组件id的联合类型
type ParentProps<T extends string> = {
  children: ReactElement<ChildProps<T>>[];
  onSelect: (val: T) => void;
};

然后是组件的使用示例，TypeScript会自动推导出onSelect参数的类型：

// 父组件实现
function Parent<T extends string>(props: ParentProps<T>) {
  return <div>{props.children}</div>;
}

// 子组件实现
function Child<ID extends string>(props: ChildProps<ID>) {
  return <div>{props.id}</div>;
}

// 使用时自动推导类型
<Parent onSelect={(val) => {
  // 这里val的类型会被自动推导为 "id1" | "id2"，而不是string！
  console.log(val);
}}>
  <Child id="id1" />
  <Child id="id2" />
</Parent>

关于ThisParameterType和ThisType的说明 #

你说的没错，ThisParameterType和ThisType确实不适用这个场景：

• ThisParameterType的作用是提取函数类型中的this参数类型，比如从(this: Foo, x: number) => void中提取Foo；
• ThisType是用来指定对象字面量的this类型，通常配合noImplicitThis编译选项使用，用来给对象内部的方法指定this类型。

这两个工具类型都和“根据组件的children字段推导其他字段类型”的需求无关，咱们用泛型的方案才是正确的方向。

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