reactjs - 在 typescript 中强制执行子组件的属性类型

Question

我试图在子组件中强制执行属性的类型。由于 Child，我期待以下代码无法编译的 name未在内部正确键入属性 Parent在应用程序中，但它不显示编译器警告。

如果我有一个 <Parent<"a">> 有没有办法实现这个目标？它不允许 child 的 Prop 名称不等于“a”吗？

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

type parentProps<T extends string> = {
  children: React.ReactElement<ChildProps<T>>;
};

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

function Child({ name }: ChildProps<"b">) {
  return <div>{name}</div>;
}

function App() {
  return (
    <Parent<"a">>
      <Child name="b" />
    </Parent>
  );
}

Answer 1

你不能!这是 TS 令人沮丧的开放问题之一。请看this issue.