Primero probé isToggle y onToggle para que fueran de tipo booleano, pero aún advierte sobre los tipos después del cambio que puede ver a continuación.
Este es un error de verificación: el tipo 'Atributo' no se puede asignar al tipo 'booleano | indefinido'.
Este es un error de onChange: el tipo 'Atributo' no se puede asignar al tipo 'ChangeEventHandler'. El tipo 'Atributo' no proporciona ninguna coincidencia para la firma '(evento: ChangeEvent): void'.
import React, {ChangeEventHandler} from "react"; import classNames from "classnames"; import './SwitchToggle.css'; interface Atrribute{ rounded:boolean; isToggled:boolean|undefined; onToggle:ChangeEventHandler<HTMLInputElement>; } const SwitchToggle =(rounded:Atrribute ,isToggled:Atrribute,onToggle:Atrribute)=>{ const sliderCX = classNames("slider",{ "rounded":rounded }) return( <label className={"switch"}> <input type={"checkbox"} checked={isToggled} onChange={onToggle}/> <span className={sliderCX}/> </label> ) } export default SwitchToggle;También uso este código en main y funciona bien
const [isToggled,setTisToggled] = useState(false); <SwitchToggle isToggled{...SwitchToggle.prototype.isToggled} onToggle={()=>setTisToggled(!SwitchToggle.prototype.isToggle)}/>Así no es como se desestructuran los argumentos de las funciones:
const SwitchToggle = (rounded:Atrribute ,isToggled:Atrribute,onToggle:Atrribute) => {...} Lo que le está diciendo a TypeScript aquí es que esta función recibirá tres argumentos, cada uno de ellos de tipo Atrribute . Pero en su lugar, esta función recibirá un argumento, de tipo Atrribute , del cual desea desestructurar tres propiedades.
Para desestructurar un objeto, use la sintaxis de desestructuración {} :
const SwitchToggle = ({ rounded, isToggled, onToggle } : Atrribute) => {...}Creo que deberías escribir así...
const SwitchToggle =({ rounded, isToggled ,onToggle }:Atrribute)=>{Su declaración de accesorios es incorrecta. No puedes escribir tus props de esta manera:
const SwitchToggle =(rounded:Atrribute ,isToggled:Atrribute,onToggle:Atrribute) => {...}
Atrribute es el tipo de todo su objeto de props , por lo que debe escribirlo de esta manera:
const SwitchToggle =(props:Atrribute) => {...}
O, si desea desestructurar su objeto, será algo como:
const SwitchToggle =({rounded, isToggled, onToggle}:Atrribute) => {...}
PD: Escribiste mal Atrribute .