reactjs - Tvinga egenskaps typer för barnkomponenter i typescript


Jag försöker tvinga typen av en egenskap i en barnkomponent. Jag förväntade mig att följande kod inte skulle kompilera eftersom Child:s name-egenskap inte är korrekt typad inne i Parent i appen, men den visar ingen kompilatorvarning.

Finns det ett sätt att uppnå målet att om jag har en <Parent<"a">> så tillåts inte barn med ett prop-namn som inte är lika med "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>
  );
}

Svar #1

Du kan inte! Och det är ett av de frustrerande öppna problemen som TS har. Vänligen se detta problem.