Si tengo un componente,
import { FC } from 'react'; interface Props { name: string; } const Home: FC<Props> = ({ name, ...rest }) => { return ( <> <div>{name}</div> <input {...rest} type="text" /> </> ); }; export default Home; e intente usarlo como <Home name="testName" placeholder="test" /> , mi editor está loco subrayando en rojo debajo del placeholder de posición.
Error sin procesar:
Type '{ name: string; placeholder: string; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'. Property 'placeholder' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.Intenté extender Props con HTMLAttributes pero no funcionó.
interface Props extends HTMLAttributes<HTMLElement> { name: string; }Esto no tiene nada que ver con el resto del operador.
interface Props { name: string; }
Su interfaz no permite un atributo de placeholder de posición en el elemento.
Si desea pasar las propiedades permitidas en una entrada, debe incluir esas propiedades en la interfaz.
interface Props extends React.ComponentPropsWithoutRef<"input"> { name: string; }children?: ReactNode definida que puede ser extendida.props para su componente.const Home: FC<Props> . Esto significa que ha ampliado la interfaz de React.FC con su definición de Props . Esto significa que tienes{children: ReactNode, name: string} descritos en mecanografiado como parámetros válidos que espera.name,...rest . Desde la definición de su interfaz, esto significa que ...rest será solo la propiedad - children , porque eso es lo que definió en su interfaz....rest spread. Dado que todos sus accesorios van dentro del botón, puede ampliar su interfaz de accesorios con React.ButtonHTMLAttributes<HTMLButtonElement> . interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> { name: string; } const Home: FC<Props> = ({ name, ...rest }) => { return ( <> <div>{name}</div> <input {...rest} type="text" /> </> ); }; Actualización: un truco de VSCODE para inspeccionar qué tipos tiene un elemento o su propiedad es simplemente pasar el cursor sobre él. 