2

Me sale el siguiente error al intentar definirle un tipo al atributo "type" de button. introducir la descripción de la imagen aquí

import React from 'react';

export const ButtonType = {
  BUTTON: "button",
  RESET: 'reset',
  SUBMIT: 'submit',
}

type Props = {
  onClick: () => {},
  children: React.ReactNode,
  disabled: boolean,
  type: React.ButtonHTMLAttributes<HTMLButtonElement>
}

const Button = (props: Props) => {
  const { children, onClick, disabled, type } = props
  return (
    <button type={type} onClick={onClick} disabled={disabled}>
      { children }
    </button>
  )
}

Button.defaultProps = {
  onClick: () => {},
  disabled: false,
  type: ButtonType.BUTTON
}

export default Button

No tengo idea cual sea del tipo que deba colocar para que no me lance el error, espero que me pueden ayudar gracias

1 respuesta 1

0

Los tipos que tienes definidos en

export const ButtonType = {
  BUTTON: "button", // <-- Tipo 'string'
  RESET: 'reset', // <-- Tipo 'string'
  SUBMIT: 'submit', // <-- Tipo 'string'
}

No son de tipo constante, por lo que se les asigna el tipo más general, en este caso string, al ser string tan general, no es compatible con los tipos de datos que debería recibir type. Para convertirlos a tipos más específicos puedes convertir todo el objeto como constante, con lo cual los tipos que quedan asignados para cada miembro quedan invariables

export const ButtonType = {
  BUTTON: "button", // <-- Tipo 'button'
  RESET: 'reset', // <-- Tipo 'reset'
  SUBMIT: 'submit', // <-- Tipo 'submit'
} as const;

Cuando definimos los tipos como constantes sabemos que estos no pueden cambiar a otra variante de string, ejemplo SUBMIT nunca será asginado a perro, el único valor que puede tener asignado es submit.

Prueba cambiando estas definiciones con const, probablemente ese sea tu problema :)

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.