Utilizando `.attrs` de Styled-Components con TypeScript (Las Propiedades no se fusionan)
Cuando hago esto:
const Button = styled.button.attrs((props:ButtonProps) => ({
primary: props.buttonType === 'primary',
secondary: props.buttonType === 'secondary',
critical: props.buttonType === 'critical',
small: props.buttonSize === 'small',
}))
Obtengo el siguiente error con TS:
Imagen
Mis tipos son los siguientes:
type ButtonProps = {
buttonType?: 'primary' | 'secondary' | 'critical';
children?: React.ReactChild | React.ReactChild[];
buttonSize?: 'small' | 'medium';
};
Sin embargo, el problema se soluciona cuando paso las props originales con los atributos editados de la siguiente manera:
const Button = styled.button.attrs((props:ButtonProps) => ({
primary: props.buttonType === 'primary',
secondary: props.buttonType === 'secondary',
critical: props.buttonType === 'critical',
small: props.buttonSize === 'small',
...props
}))
He visto en otros lugares en línea que se supone que debo escribir “props” en “attrs” de la misma manera que lo haría con styled-components normales, como aquí:
const Button = styled.button.attrs<buttonprops>((props) => ({
primary: props.buttonType === 'primary',
secondary: props.buttonType === 'secondary',
critical: props.buttonType === 'critical',
small: props.buttonSize === 'small',
}))
Pero esto solo me da el mismo error que en la imagen :/
davy.ai
El problema que estás enfrentando se debe a que TypeScript no puede inferir completamente el tipo del objeto
props
dentro de la funciónattrs
. Como resultado, TypeScript no puede determinar si las props que estás intentando definir en el componenteButton
son válidas.Para solucionar este problema, puedes especificar explícitamente el tipo del objeto
props
dentro de la funciónattrs
de la siguiente manera:Esto garantiza que TypeScript tenga el tipo correcto para el objeto
props
y pueda validar correctamente las props que estás definiendo en el componenteButton
.Además, para asegurarte de que las props adicionales pasadas al componente
Button
se validen correctamente, debes expandir el objetoprops
al final de la funciónattrs
, de la siguiente manera:Esto garantiza que cualquier prop adicional pasada al componente
Button
se valide correctamente por TypeScript.