React PropTypes vs. Fluxo

PropTypes e Flow cobrem coisas semelhantes, mas usam abordagens diferentes. Os PropTypes podem fornecer avisos durante o tempo de execução, o que pode ser útil para encontrar rapidamente respostas malformadas vindas de um servidor, etc. No entanto, o Flow parece ser o futuro e com conceitos como genéricos é uma solução muito flexível. Além disso, o preenchimento automático oferecido pela Nuclide é uma grande vantagem para o Flow.

Minha dúvida agora é qual é o melhor caminho a seguir, ao iniciar um novo projeto. Ou poderia ser uma boa solução para usar ambos, Flow e PropTypes? O problema de usar ambos é que você escreve muitos códigos duplicados. Este é um exemplo de um aplicativo reprodutor de música que escrevi:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Ambas as definições contêm basicamente as mesmas informações e quando o tipo de dados é alterado, ambas as definições precisam ser atualizadas.

Eu encontrei este plugin babel para converter declarações de tipo em PropTypes, o que pode ser uma solução.

Um ano depois de fazer esta pergunta, eu queria dar uma atualização sobre como minhas experiências com esse problema.

Como o Flow evoluiu muito, comecei a digitar minha base de código com ele e não adicionei nenhuma nova definição de PropType. Até agora, acho que esse é um bom caminho a seguir, porque, conforme mencionado acima, ele permite que você não apenas digite props, mas também outras partes do seu código. Isso é muito útil, por exemplo, quando você tem uma cópia de seus adereços no estado, que pode ser modificada pelo usuário. Além disso, o preenchimento automático em IDEs é um ganho incrível.

Os conversores automáticos em uma ou outra direção realmente não decolaram. Portanto, para novos projetos, eu realmente recomendo usar Flow em vez de PropTypes (caso você não queira fazer a digitação duas vezes).

Além de ambos pertencerem ao amplo campo de verificação de tipo, não há realmente muita semelhança entre os dois.

O fluxo é uma ferramenta de análise estática que usa um superconjunto da linguagem, permitindo que você adicione anotações de tipo a todo o seu código e capture uma classe inteira de bugs em tempo de compilação.

PropTypes é um verificador de tipo básico que foi corrigido no React. Ele não pode verificar nada além dos tipos de adereços sendo passados ​​para um determinado componente.

Se você deseja uma verificação de tipo mais flexível para todo o projeto, Flow / TypeScript são as escolhas apropriadas. Contanto que você esteja apenas passando tipos anotados para componentes, você não precisará de PropTypes.

Se você deseja apenas verificar os tipos de prop, não complique demais o resto da sua base de código e opte pela opção mais simples.

Eu acredito que o ponto perdido aqui é que o Flow é um verificador estático, enquanto PropTypes é um verificador de tempo de execução , o que significa

• O fluxo pode interceptar erros upstream durante a codificação: ele pode, teoricamente, ignorar alguns erros que você não conhece (se você não implementou o fluxo suficiente em seu projeto, por exemplo, ou no caso de objetos aninhados profundos)
• PropTypes os pegará downstream durante o teste, então nunca faltará

Tente declarar o tipo de adereços usando apenas o Flow. Especifique um tipo incorreto, como número em vez de string. Você verá que isso será sinalizado no código que usa o componente em seu editor com reconhecimento de fluxo. No entanto, isso não fará com que nenhum teste falhe e seu aplicativo ainda funcionará.

Agora adicione o uso de React PropTypes com um tipo incorreto. Isso IRÁ fazer com que os testes falhem e sejam sinalizados no console do navegador quando o aplicativo for executado.

Com base nisso, parece que mesmo que o Flow esteja sendo usado, os PropTypes também devem ser especificados.