function Foo({ children, ...rest }: { children: React.ReactNode; /*rest: how do I type `rest`? */ }) { return ( <span style={{ background: "red" }} {...rest}> {children} </span> ); } export default function App() { return ( <div className="App"> <Foo style={{ background: "blue" }}>Hello CodeSandbox</Foo> </div> ); }Aquí está la demostración: https://codesandbox.io/s/how-to-type-rest-huv2z?file=/src/App.tsx:50-412
Foo se usa para anular los accesorios que acepta span . ¿Cómo escribo rest en Foo ?
No puede escribir la parte extendida del objeto directamente, pero puede agregar las propiedades necesarias con el tipo de unión ( & ).
En este caso, las propiedades adicionales que desea permitir son del tipo React.HTMLAttributes<HTMLSpanElement> . Entonces terminas con:
function Foo({ children, ...rest }: { children: React.ReactNode; } & React.HTMLAttributes<HTMLSpanElement>) { return ( <span style={{ background: "red" }} {...rest}> {children} </span> ); } Aparte, puede evitar escribir manualmente la propiedad React.FunctionComponent children En realidad, esto evita la definición de unión y es un poco más idiomático en el código de React.
const Foo: React.FunctionComponent<React.HTMLAttributes<HTMLSpanElement>> = ({ children, ...rest }) => { // ... }Puedes usar algo como esto como un tipo:
{ children: React.ReactNode; /*rest: how do I type `rest`? */ } & HTMLProps<HTMLSpanElement>