reactjs - ¿Cómo puedo hacer que TypeScript verifique tipos en el operador spread en las props de React?

Este código fue marcado correctamente en TS:

<MyComponent nonexistentProp="foo" />

Este código no es:

<MyComponent { ...{ nonexistentProp: "foo" }} />

Parece trivial para TS verificar que no se estén pasando props incorrectos: ¿cómo podemos habilitar esta verificación para asegurarnos de que estamos pasando los props esperados?

Respuesta #1

Sospecho que esta verificación de tipos está sujeta a las mismas restricciones que el código TypeScript regular:

interface Contract {
  a: string;
}

const allowed: Contract = {
  a: "bc",
};

const notAllowed: Contract = {
  a: "bc",
  b: "dc",
};

const aboutToBeAllowed = {
  a: "bc",
  b: "dc",
};

const alsoAllowed: Contract = aboutToBeAllowed;

El problema que se muestra aquí es que TypeScript tiene sus limitaciones, en que es un sistema de tipos estructural.

Solo puede hacer cumplir las restricciones que nosotros los humanos pensamos que debería estar haciendo en todos los casos durante una asignación de literal de objeto (ver asignación de notAllowed).

El caso alsoAllowed es esencialmente el mismo que la variante notAllowed, pero funciona. Esto se debe a que el objeto anónimo cumple con las restricciones de Contract.

De manera similar, en tu ejemplo de TSX, esto es esencialmente el mismo comportamiento que el TypeScript regular:

interface Props { a: string; };
const MyComponent: React.SFC<Props> = (props) => <div />;

const myCompOk1 = <MyComponent a="ab" />;

const myCompBad1 = <MyComponent a="ab" b="cd" />;

const anonPropsNoExtra = { a: "bc" };
const myCompOk2 = <MyComponent {...anonPropsNoExtra} />;

const anonPropsWithExtra = { a: "bc", b: "cd" };
const myCompOk3 = <MyComponent {...anonPropsWithExtra} />;

No creo que sea posible que lo haga cumplir de la manera que estás buscando