在TypeScript中强制约束子组件的属性类型

你当前的代码之所以没触发编译错误，核心原因有两点：

1. Child 组件的 props 被硬编码成了 ChildProps<"b">，所以 <Child name="b" /> 本身就是类型合法的 JSX 元素；
2. TypeScript 对 React.ReactElement<ChildProps<T>> 的检查是基于结构类型的，ChildProps<"b"> 和 ChildProps<"a"> 都属于 { name: string } 的子类型，因此被判定为兼容。

下面是两种可行的解决方式：

方案一：让 Child 成为泛型组件，并严格约束子元素类型 #

把 Child 改成泛型组件，同时在 Parent 的 props 中明确限定子元素必须是 Child 组件的实例，且 props 完全匹配指定类型：

type ChildProps<T> = {
  name: T;
};

// 定义泛型 Child 组件
const Child = <T extends string>({ name }: ChildProps<T>) => {
  return <div>{name}</div>;
};

// 约束 Parent 的子元素必须是 Child 组件，且 props 符合 ChildProps<T>
type ParentProps<T extends string> = {
  children: React.ReactElement<ChildProps<T>, typeof Child>;
};

function Parent<T extends string>({ children }: ParentProps<T>) {
  return <div>{children}</div>;
}

function App() {
  return (
    <Parent<"a">>
      {/* ❌ 编译错误：类型"{ name: "b"; }"的参数不能赋给类型"ChildProps<"a">"的参数 */}
      <Child name="b" />
      {/* ✅ 合法 */}
      {/* <Child name="a" /> */}
    </Parent>
  );
}

方案二：使用 Render Props 模式（更灵活的约束方式） #

如果需要更灵活地控制子组件的 props 传递，Render Props 是更可靠的方案，它能直接强制子组件使用 Parent 规定的 props 类型：

type ChildProps<T> = {
  name: T;
};

type ParentProps<T extends string> = {
  // 子元素是一个函数，接收 Parent 规定的 props 并返回 JSX
  children: (props: ChildProps<T>) => React.ReactElement;
};

function Parent<T extends string>({ children }: ParentProps<T>) {
  // 这里可以固定传递符合 T 类型的 props，也可以根据逻辑动态生成
  return <div>{children({ name: "a" as T })}</div>;
}

// Child 可以接受任意 string 类型的 name，由 Parent 约束
function Child({ name }: ChildProps<string>) {
  return <div>{name}</div>;
}

function App() {
  return (
    <Parent<"a">>
      {/* ✅ 合法：直接使用 Parent 传递的 props */}
      {(props) => <Child {...props} />}
      {/* ❌ 编译错误：尝试覆盖 name 为 "b"，与 Parent 规定的 "a" 类型冲突 */}
      {/* {(props) => <Child name="b" {...props} />} */}
    </Parent>
  );
}

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