-2

Sou novo com o Typescript, estou tentando fazer um componente de um botão. O que estou fazendo de errado?

Erro:

Property 'colors' is missing in type '{ title: string; }' but required in type 'ButtonGradientProps'.ts(2741) LinearGradient.d.ts(24, 5): 'colors' is declared here.


Componente


import { LinearGradientProps } from 'expo-linear-gradient';

import { Gradient, Button, Title } from './styles';

interface ButtonGradientProps extends LinearGradientProps {
  title: string;
}

export default function ButtonGradient({
  title,
  ...rest
}: ButtonGradientProps) {
  return (
    <Button>
      <Gradient
        colors={['#A2C11C', '#2C5D63']}
        start={{ y: 0.0, x: 0.0 }}
        end={{ y: 0.0, x: 1.0 }}
        {...rest}
      >
        <Title>{title}</Title>
      </Gradient>
    </Button>
  );
}

CSS Componente

import { RFValue } from 'react-native-responsive-fontsize';
import { LinearGradient } from 'expo-linear-gradient';

import styled from 'styled-components/native';

export const Button = styled(TouchableOpacity)`
  width: 100%;
  height: ${RFValue(55)}px;
`;

export const Gradient = styled(LinearGradient)`
  flex: 1;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
`;

export const Title = styled.Text`
  color: ${({ theme }) => theme.colors.white};
  font-family: ${({ theme }) => theme.fonts.medium_500};
  font-size: ${RFValue(15)}px;
`; 

Tela Welcome

import { StatusBar } from 'react-native';

import ButtonGradient from '../../components/ButtonGradient';
import theme from '../../global/styles/theme';
import {
  Container,
  ContainerNextPage,
  DivText,
  Text,
  LinkCadastro,
} from './styles';

export default function Welcome() {
  return (
    <Container>

      (...)

      <ContainerNextPage>
        <ButtonGradient title="Vamos lá!" />                      // Erro

        <DivText>
          <Text>Ainda não possui conta?</Text>
          <LinkCadastro>Cadastre-se agora!</LinkCadastro>
        </DivText>
      </ContainerNextPage>
    </Container>
  );
}

1 Resposta 1

0

O TS basicamente está dizendo que colors é uma prop obrigatória, que faltou passar quando você invocou o componente:

<ButtonGradient title="Vamos lá!" />  // falta o "colors"

Quando você definiu seu componente ButtonGradient, você especificou suas props como:

interface ButtonGradientProps extends LinearGradientProps {
  title: string;
}

Embora você não tenha especificado que seu componente exige uma prop color, você disse que ele recebe todas as props do LinearGradientProps. Se você navegar pra LinearGradientProps vai existir uma prop obrigatória color lá.

Uma solução simples seria remover o extends LinearGradientProps. O TS vai parar de reclamar deste erro. Só que se você quiser passar qualquer outra prop ao <ButtonGradient />, ele vai reclamar. Quando ele reclamar, você pode ir adicionando as props necessárias uma a uma.

Outra solução simples seria declarar que o objeto aceita qualquer propriedade, assim:

interface ButtonGradientProps {
  title: string;
  [key: string]: any
}

Neste caso o TS vai deixar passar qualquer prop, sendo permissivo até demais. Se você passar uma prop que não existe nem no LinearGradient, ele não vai reclamar.

E agora vou passar a alternativa mais complexa: Definir as props de entrada como uma união entre { title } + LinearGradientProps porém tornando opcional o colors...

type ButtonGradientProps = 
  { title: string } & 
  Omit<LinearGradientProps, 'color'> &
  Optional<Pick<LinearGradientProps, 'color'>>

Note que todas as alterações mencionadas acima não fazem alteração nenhuma no JS gerado. Estamos apenas dando "dicas" diferentes pro TS checar o seu código.

Eu pessoalmente recomendaria que você ficasse com a opção 1 ou 2, às vezes vale a pena sacrificar a "precisão da checagem de tipos" por mais produtividade. O caso 3 é para se você estiver escrevendo uma biblioteca, ou caso esteja com tempo.

1
  • Ótima explicação, resolveu meu problema. Muito obrigado!!
    – Gustavo
    4/10/2021 às 13:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .