Análise estática com Flow — parte 1

Leandro Nunes
Oct 10, 2017 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post
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
Image for post
Image for post
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.

Meninunes

Web Development by — Leandro “Little Big” Nunes

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store