As ferramentas JavaScript Flow e TypeScript são semelhantes em muitos aspectos. No entanto, eles diferem em relação à sua funcionalidade e habilidades como verificadores estáticos.
Descubra como o Flow e o TypeScript se comparam e qual é o melhor verificador estático para o seu próximo projeto.
O que é fluxo?
Flow é uma ferramenta de verificação de tipo estático para JavaScript, criada pelo Facebook para identificar erros de código de compilação e execução de antemão. Ele faz isso monitorando os valores que seu código transmite e como seus tipos de dados mudam ao longo do tempo. Este sistema de verificação estática melhora a confiabilidade e a legibilidade. Também ajuda a reduzir a ocorrência de bugs em seu código JavaScript.
O que é TypeScript?
O TypeScript não é apenas um verificador de tipos, como o Flow, mas uma linguagem de programação fortemente tipada. A Microsoft criou a linguagem, construindo-a sobre o JavaScript.
Por convenção, você deve criar arquivos TypeScript com uma extensão de arquivo .ts. Você pode compilar um arquivo TypeScript em código JavaScript, portanto, sempre que o JavaScript for executado, o TypeScript também poderá ser executado.
Configurando o fluxo para seu aplicativo JavaScript
Você pode integrar o Flow a qualquer estrutura JavaScript que decidir usar em seu projeto. Você precisará ter configurado um compilador JavaScript como o Babel para lidar com todos os tipos de fluxo em seu código e compilá-lo em JavaScript vanilla.
Para instalar o Flow em seu projeto, execute o seguinte comando:
adição de fios --dev flow-bin
Em seguida, você deve instalar a interface de linha de comando do Flow globalmente. Essa CLI fornece vários comandos para criar aplicativos de fluxo.
No macOS, use Homebrew para instalar o Flow CLI:
fermentar instalar flow-cli
você vai precisar saber como usar o Windows PowerShell para instalar o Flow em uma máquina Windows.
Para instalar o Flow CLI no Windows, execute este script em seu terminal do PowerShell:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Projetos de fluxo requerem um .flowconfig arquivo para todas as configurações necessárias da ferramenta.
Execute este comando para criar um arquivo de configuração do Flow em um projeto novo ou existente:
npm run flow init
Esteja ciente de que estruturas específicas podem enviar projetos com um arquivo de configuração do Flow por padrão.
A última coisa a fazer é adicionar o script Flow ao seu pacote.json arquivo:
"scripts": {
"fluxo": "fluxo"
},
Agora você configurou com sucesso o Flow para ser executado em seu aplicativo JavaScript.
Configurando o TypeScript em seu projeto
Execute o seguinte comando para instalar o TypeScript em seu projeto:
npm instalar texto datilografado --save-dev
Você também deve instalar o compilador para compilar o código TypeScript no JavaScript vanilla. Você também pode precisar definir a configuração do TypeScript para um melhor fluxo de trabalho experiência.
Instale o compilador TypeScript globalmente com este comando:
npm instalar -g texto datilografado
Para inicializar um tsconfig.json config, digite o seguinte comando em seu terminal:
tsc --iniciar
As instruções acima irão ajudá-lo a começar a usar o TypeScript em seu projeto.
Construindo com Fluxo
Para escrever o código do Flow em um arquivo JavaScript, declare a sintaxe do Flow na parte superior do código antes de qualquer expressão ou instrução:
// @fluxo
Você pode definir tipos de dados de variáveis e funções usando anotação. O fluxo gerará um erro se o tipo antecipado não for atendido.
Por exemplo:
// @fluxo
deixe foo: número = "Olá";
Flow lançará um erro aqui porque o tipo de valor esperado de foo é um número, não uma string.
Correr fluxo de execução npm para ver a saída de erro no terminal:
Habilitar a extensão Flow dentro de qualquer editor de texto de sua escolha mostrará os erros em seu editor enquanto você codifica.
O Flow também usa inferência de tipo para determinar qual deve ser o valor esperado de uma expressão.
Por exemplo:
// @fluxo
funçãofaça alguma coisa(valor) {
valor de retorno * "olá";
};
deixar resultado = fazerAlgo(6);
Você não pode executar operações aritméticas entre o número seis e a string olá.
A saída de fluxo de execução npm será um erro:
Desenvolvendo com TypeScript
A sintaxe de tipo do TypeScript é muito semelhante à do Flow. Você pode definir tipos de variáveis e funções com anotação de tipo exatamente como faria no Flow.
O TypeScript vem com vários outros recursos semelhantes ao Flow, como inferência de tipos.
Veja o exemplo de código TypeScript:
// Typescript.ts
digite Resultado = "passar" | "falhar"
funçãoverificar(resultado: Resultado) {
se (resultado "passar") {
console.log("Passado")
} outro {
console.log("Fracassado")
}
}
Você pode correr tsc Typescript.ts para compilar este código para JavaScript simples.
Este seria o mesmo código TypeScript compilado no JavaScript vanilla:
funçãoverificar(resultado) {
se (resultado "passar") {
console.log("Passado")
} outro {
console.log("Fracassado")
}
}
Prós e Contras de TypeScript e Flow
Agora você sabe como começar a usar as duas ferramentas em seu projeto JavaScript. Você deve saber os prós e os contras de usar cada um.
Integração
O processo de configuração para usar o Flow é um pouco mais complexo do que o TypeScript. Você precisará configurar um compilador JavaScript como Babel ou flow-remove-types para remover os tipos de fluxo do seu código. O TypeScript inclui um compilador para converter o código TypeScript em JavaScript, facilitando a integração.
O TypeScript possui ferramentas muito melhores e a maioria das estruturas JavaScript o suporta por padrão. Os IDEs mais populares fornecem suporte de primeira classe para TypeScript. Flow também é suportado, mas requer um plug-in especial.
Comunidade
Ao contrário do Flow, estruturas JavaScript como React, React Native, Vue e Angular oferecem suporte a TypeScript pronto para uso.
Essa ampla adoção e grande comunidade resultam em melhores recursos de aprendizado, atualizações e suporte a ferramentas.
Flexibilidade
O Flow atua como um verificador de tipo que funciona para avisá-lo sobre códigos potencialmente incorretos. O TypeScript impede que você escreva códigos ruins e possui um sistema de tipo estrito. TypeScript também suporta encapsulamento de objetos, que ajuda a manter o código complexo gerenciável. O Flow não tem esse recurso.
Serviços
O TypeScript fornece todos os serviços da linguagem JavaScript, como refatoração de código e preenchimento automático. Flow é um verificador de tipo estático que fornece uma compreensão e análise profundas do seu código escrito.
O Flow pode trabalhar com os módulos e bibliotecas importados do seu projeto e discernir como eles afetam seu código. Por exemplo, ele pode detectar e emitir um aviso quando uma biblioteca necessária em seu projeto estiver ausente ou quando você tentar acessar uma definição que não existe.
Qual verificador estático você deve usar?
Existem muitos argumentos válidos para usar cada ferramenta porque cada uma tem recursos diferentes. Alguns podem ser de alta prioridade para um desenvolvedor e baixa prioridade para o outro. Ambas as ferramentas funcionam bem em seus próprios aspectos e oferecem vantagens para usá-las.
Você deve examinar os requisitos do seu projeto e tomar uma decisão fundamentada com base neles.
