1

Estoy empezando con typescript y me están asaltando algunas dudas para hacer mi código más sólido. Tengo un componente que es un menu con tres opciones:

const List = ({ statusEvents }: { statusEvents: any }) => {
  const match = useRouteMatch();

  const handleStatusEvents = (status: string): void => {
    statusEvents(status);
  };

  return (
    <>
      <ListStyled>
        <li>
          <NavLinkStyled
            activeClassName="link"
            to={`${match.path}/pendientes`}
            onClick={() => handleStatusEvents("pendientes")}
          >
            Pendientes
          </NavLinkStyled>
        </li>
        <li>
          <NavLinkStyled
            activeClassName="link"
            to={`${match.path}/activas`}
            onClick={() => handleStatusEvents("activas")}
          >
            Activas
          </NavLinkStyled>
        </li>
        <li>
          <NavLinkStyled
            activeClassName="link"
            to={`${match.path}/resultados`}
            onClick={() => handleStatusEvents("resultados")}
          >
            Resultados
          </NavLinkStyled>
        </li>
      </ListStyled>
    </>
  );
};

export default List;

Y su componente padre:

interface IPropsState {
  index: number;
  image: string;
  title: string;
  description: string;
  time: string;
  assistants: number;
  isActive: boolean;
}

const EventPage = () => {
  const [filter, setFilter] = useState<IPropsState[]>(ListOfEvents);

  const handleChangeStatusEvents = (status: string) => {
    switch (status) {
      case "pendientes":
        const pendientes = ListOfEvents.filter(
          (event) => event.isActive === false
        );
        setFilter(pendientes);
        break;
      case "activas":
        const activas = ListOfEvents.filter((event) => event.isActive === true);
        setFilter(activas);
        break;
      case "resultados":
        const resultados = ListOfEvents;
        setFilter(resultados);
    }
  };

  return (
    <MainLayout>
      <Spacer height="30" />
      <Title text="Eventos" />
      <Spacer height="30" />
      <List statusEvents={handleChangeStatusEvents} />
      {filter ? <ListEvents events={filter} /> : <EmptyEvents />}
    </MainLayout>
  );
};

export default EventPage;

En este menú lo que hace es enviar a través del onClick a una función handleStatusEvents a su componente antecesor pasando por props un texto con el nombre de cada categoría.

onClick={() => handleStatusEvents("pendientes")}



 const handleStatusEvents = (status: string): void => {
    statusEvents(status);
  };

El tipado de la función handleStatusEvents es de tipo void y los argumentos son de tipo string. Cuando quiero pasarle el statusEvents a su padre (por props)

const List = ({ statusEvents }: { statusEvents: any }) => {}

tengo que poner :any porque en el componente padre, la prop statusEvents está llamando a una función que setea los states. Entonces es aquí que clase de tipado tengo que ponerle (que no sea any), porque por una parte entiendo que desde el componente hijo está "saliendo" un string por props, pero el padre está llamando una función... No entiendo muy bien que tipado sería el deseado. Muchas gracias por la ayuda.

1 respuesta 1

1

TypeScript Interface y Function type expression

Una interface TypeScript sirve para definir la forma de las propiedades de un objeto, en este caso del componente ReactJS.

Ahora, se puede usar la forma function type expression with parameter para describir el método handleChangeStatusEvents, junto con una interface:

interface Props {
    statusEvents: (a:string) => void;
}

De acuerdo a la documentacion de TS la siguiente línea:

(a:string) => void

Se puede interpretar como:

Una función con un parámetro, llamado a, de tipo cadena, que no tiene un valor de retorno.

El método handleChangeStatusEvents no tiene un return explícito, por lo que se puede configurar en TypeScript como una función que regresa void y además, espera recibir un parametro de tipo string.

Luego, se configura el componente ReactJS para recibir la interface Props:

const List = ({ statusEvents }: Props) => {
//return...
}

Espero que esta respuesta sea de ayuda.

3
  • Funciona perfectamente. Ya no da ningún error de tipado. Muchas gracias! g.4
    – jaumeserr
    Commented el 16 ago. 2021 a las 5:58
  • 1
    Se ve muy bien tu proyecto colega, por cierto ¿Los componentes como NavLinkStyled los estas sacando de alguna librería o tu los estas construyendo? saludos
    – g.4
    Commented el 16 ago. 2021 a las 14:49
  • Hola @g.4! NavLinkStyled es un componente creado con styled components. Saludos!
    – jaumeserr
    Commented el 18 ago. 2021 a las 9:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.