Análise estática com Flow — parte 1

A versatilidade do JavaScript em não possuir tipos por diversas vezes já foi citado como uma de suas vantagens, porém hoje em dia, a comunidade está cada vez mais chegando ao consenso que tipos são bons!

Com a ascensão do Angular, o TypeScript vem ganhando grande força na comunidade e uma de suas características exatamente é a possibilidade de adicionar tipos ao código e junto disso uma ótima análise estática do código.

Quem nunca acabou digitando errado e só viu o erro ser acusado no browser ?

É exatamente nesses momentos que uma análise estática de código nos ajudam. Conseguimos pegar esses erros em tempo de desenvolvimento e não em tempo de execução!

Assim como o Angular adotou TypeScript como sua linguagem oficial, com a turma do React (e simulares), é mais comum vermos a adoção do Flow.
Flow é mais uma ferramenta que o Facebook lançou para a comunidade e é sobre ele que irei abordar neste post.

Setup

Acredito que você já esteja utilizando Babel em seu processo de build, então irei abordar a instalação com o Babel. Porém outra alternativa seria utilizar o flow-remove-types.

1. Adicionamos o preset do Flow como dependência do projeto:

npm i -D babel-preset-flow

2. Adicionamos nos presets do nosso .babelrc

{
  "presets": ["flow"]
}

3. Agora podemos adicionar o flow-bin ao projeto. É ele que irá processar nosso código e fazer a análise estática.

npm i -D flow-bin

4. devemos rodar uma vez o comando abaixo para que seja criado o arquivo de configuração inicial (.flowconfig).

./node_modules/.bin/flow init

A partir de agora, qualquer código JavaScript que quisermos que seja feito a análise sintática do Flow, basta adicionar um comentário no início do arquivo:

// @flow
ou
/* @flow */

Vamos testar se está funcionando com um simples e famoso código de soma:

// @flow
const sum = (val1:number, val2:number):number => val1 + val2
const result = sum(1, '2')

Vamos rodar o flow status no terminal para validar nosso script:

./node_modules/.bin/flow status

Se tudo estiver correto com o setup, devemos ter este erro.

Como podemos ver, o Flow nos ajuda a capturar um erro de tipagem em tempo de desenvolvimento e não na execução onde um usuário poderia se deparar com este caso. Percebam que não é um erro de sintaxe, mas sim um erro de tipo, e isso não gera nenhum erro de JavaScript, mas gera um erro de resultado, pois o esperado seria 3 (número) e não “12” (string).

Este exemplo de setup está disponível neste repositório “boilerplate” e você pode utilizar como ponto de partida para seus estudos e testes.

Agora que já temos o setup do projeto, em breve irei continuar esta série abordando como tenho tirado proveito do Flow em meus projetos.

Parte 2 — Integrando com editor VSCode

Update [17/10/2017]: Se você utiliza Windows e estiver com problema em rodar o comando ./node_modules/.bin/flow adicione um npm script
"flow": "flow" e rode com npm run flow pois desta forma o npm se encarrega de fazer os devidos tratamentos. Observe o package.json do repositório de exemplo.