Checagem de Tipos com PropTypes

Antes de mais nada o que é e como funciona a checagem de tipos com PropTypes

PropTypes é uma biblioteca do React que permite verificar o tipo dos componentes props antes da aplicação ser executada. Isso ajuda a encontrar erros de tipo em tempo de desenvolvimento, o que pode ajudar a evitar problemas de runtime. PropTypes é uma forma fácil de documentar e validar as propriedades que um componente precisa para funcionar corretamente.

Vantagens:

1. Melhoria da documentação: PropTypes torna mais fácil para outros desenvolvedores entenderem como usar seu componente, pois eles podem ver quais propriedades são esperadas e quais tipos de dados são aceitos.
2. Validação de tempo de desenvolvimento: Ao usar PropTypes, você pode encontrar erros de tipo antes da aplicação ser executada, o que é muito útil para evitar erros em produção.
3. Melhoria da qualidade do código: Ao garantir que os componentes recebam as propriedades corretas, você pode ter certeza de que seu código será mais estável e confiável.

Desvantagens:

1. Overhead de tempo de execução: Verificação de tipos através de PropTypes adiciona overhead de tempo de execução, pois as verificações são feitas em tempo de execução. Isso pode afetar o desempenho da aplicação em casos de uso intensivo.
2. Não é garantido que todos os erros sejam detectados: Embora PropTypes seja uma ferramenta útil, ele não garante que todos os erros de tipo serão detectados. Alguns erros só serão descobertos em tempo de execução.
3. Não é obrigatório: Embora PropTypes seja altamente recomendado, não é uma obrigação usá-lo. Alguns desenvolvedores optam por não usá-lo porque acham que o overhead de tempo de execução não vale a pena ou porque preferem outras abordagens de validação.

Exemplos de uso da checagem de tipos com PropTypes

Validando propriedades de um componente de função:

import React from 'react';
import PropTypes from 'prop-types';

function MyComponent(props) {
  return <div>{props.message}</div>;
}

MyComponent.propTypes = {
  message: PropTypes.string.isRequired,
};

export default MyComponent;

Usando PropTypes com useState hook:

import React, { useState } from 'react';
import PropTypes from 'prop-types';

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Counter.propTypes = {
  initialCount: PropTypes.number,
};

Counter.defaultProps = {
  initialCount: 0,
};

export default Counter;

Usando PropTypes com useEffect hook:

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

function FetchData({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return (
    <div>
      {data === null ? (
        'Loading...'
      ) : (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

FetchData.propTypes = {
  url: PropTypes.string.isRequired,
};

export default FetchData;

Tipos que contemplam os PropTypes

Os PropTypes fornecem vários tipos de validação que você pode usar para garantir que as propriedades recebidas por seus componentes do React estejam corretas:

1. PropTypes.array: Valida que a propriedade é um array.
2. PropTypes.bool: Valida que a propriedade é um valor booleano (true ou false).
3. PropTypes.func: Valida que a propriedade é uma função.
4. PropTypes.number: Valida que a propriedade é um número.
5. PropTypes.object: Valida que a propriedade é um objeto.
6. PropTypes.string: Valida que a propriedade é uma string.
7. PropTypes.symbol: Valida que a propriedade é um símbolo.
8. PropTypes.node: Valida que a propriedade é um nó do React, como uma string, elemento ou outro componente.
9. PropTypes.element: Valida que a propriedade é um elemento do React.
10. PropTypes.instanceOf(Class): Valida que a propriedade é uma instância de uma determinada classe.
11. PropTypes.oneOf(['value1', 'value2']): Valida que a propriedade é igual a uma das opções especificadas.
12. PropTypes.oneOfType([PropTypes.string, PropTypes.number]): Valida que a propriedade é um dos tipos especificados.
13. PropTypes.arrayOf(PropTypes.number): Valida que a propriedade é um array de números.
14. PropTypes.objectOf(PropTypes.number): Valida que a propriedade é um objeto com valores numéricos.
15. PropTypes.shape({ key1: PropTypes.string, key2: PropTypes.number }): Valida que a propriedade é um objeto com as chaves e tipos especificados.
16. PropTypes.any: Desabilita a validação de tipos para a propriedade.

Além disso, você pode adicionar o sufixo .isRequired aos tipos de PropTypes para indicar que a propriedade é obrigatória. Se uma propriedade obrigatória não for fornecida, será gerado um aviso no console do navegador.

PropTypes Vs TypeScript

A pergunta que não quer calar, o uso da checagem de tipos com PropTypes é motivo para o não uso do TypeScript e vice-versa?

A resposta é… Não, o uso de PropTypes não conflita com o TypeScript. De fato, muitos desenvolvedores usam a checagem de tipos com PropTypes e TypeScript juntos em seus projetos do React, pois cada um oferece vantagens únicas.

PropTypes fornece validação de tipos em tempo de execução, enquanto o TypeScript fornece validação de tipos em tempo de compilação. Juntos, eles fornecem uma camada extra de segurança e ajudam a encontrar erros mais cedo na etapa de desenvolvimento.

Além disso, PropTypes pode ser útil para projetos existentes que já estão usando React e desejam adicionar validação de tipos sem fazer uma grande mudança para o TypeScript. Já para projetos novos, o TypeScript pode ser uma opção mais completa e avançada, já que oferece muitas outras vantagens, como inferência de tipos e tipos personalizados.

Em resumo, não há conflito entre o uso de PropTypes e TypeScript e os dois podem ser usados juntos em um projeto do React.