Las herramientas de JavaScript Flow y TypeScript son similares en muchos aspectos. Sin embargo, difieren en cuanto a su funcionalidad y habilidades como damas estáticas.
Descubra cómo se comparan Flow y TypeScript y cuál es el mejor verificador estático para su próximo proyecto.
¿Qué es el flujo?
Flow es una herramienta de verificación de tipos estáticos para JavaScript, creada por Facebook para identificar de antemano los errores de compilación y código en tiempo de ejecución. Lo hace al monitorear los valores que pasa su código y cómo sus tipos de datos cambian con el tiempo. Este sistema de comprobación estática mejora la fiabilidad y la legibilidad. También ayuda a reducir la aparición de errores en su código JavaScript.
¿Qué es TypeScript?
TypeScript no es solo un verificador de tipos, como Flow, sino un lenguaje de programación fuertemente tipado. Microsoft creó el lenguaje, construyéndolo sobre JavaScript.
Por convención, debe crear archivos TypeScript con una extensión de archivo .ts. Puede compilar un archivo TypeScript en código JavaScript, por lo que siempre que se ejecute JavaScript, TypeScript también se puede ejecutar.
Configuración de flujo para su aplicación de JavaScript
Puede integrar Flow en cualquier marco de JavaScript que decida usar para su proyecto. Deberá haber configurado un compilador de JavaScript como Babel para manejar todos los tipos de flujo en su código y compilarlo en JavaScript estándar.
Para instalar Flow en su proyecto, ejecute el siguiente comando:
añadir hilo --dev contenedor de flujo
A continuación, debe instalar la interfaz de línea de comandos de Flow globalmente. Esta CLI proporciona varios comandos para crear aplicaciones de flujo.
En macOS, use Cerveza casera para instalar la CLI de Flujo:
elaborar cerveza instalar flujo-cli
necesitarás saber cómo usar Windows PowerShell para instalar Flow en una máquina con Windows.
Para instalar Flow CLI en Windows, ejecute este script en su terminal de PowerShell:
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Los proyectos de flujo requieren un .flowconfig archivo para todas las configuraciones necesarias de la herramienta.
Ejecute este comando para crear un archivo de configuración de flujo en un proyecto nuevo o existente:
inicio de flujo de ejecución de npm
Tenga en cuenta que los marcos específicos pueden enviar proyectos con un archivo de configuración de flujo de forma predeterminada.
Lo último que debe hacer es agregar el script de flujo a su paquete.json archivo:
"guiones": {
"fluir": "fluir"
},
Ahora ha configurado correctamente Flow para que se ejecute en su aplicación de JavaScript.
Configuración de TypeScript en su proyecto
Ejecute el siguiente comando para instalar TypeScript en su proyecto:
npm instalar mecanografiado --save-dev
También debe instalar el compilador para compilar código TypeScript en JavaScript estándar. También puede necesitar configure la configuración de TypeScript para un mejor flujo de trabajo experiencia.
Instale el compilador de TypeScript globalmente con este comando:
npm instalar -g mecanografiado
Para inicializar un tsconfig.json config, ingrese el siguiente comando en su terminal:
tsc --en eso
Las instrucciones anteriores lo ayudarán a comenzar a usar TypeScript en su proyecto.
Construyendo con Flujo
Para escribir código de flujo en un archivo JavaScript, declare la sintaxis de flujo en la parte superior del código antes de cualquier expresión o declaración:
// @fluir
Puede establecer tipos de datos de variables y funciones mediante la anotación. Entonces, Flow generará un error si no se cumple el tipo anticipado.
Por ejemplo:
// @fluir
let foo: número = "Hola";
El flujo arrojará un error aquí porque el tipo de valor esperado de Foo es un número, no una cadena.
Correr flujo de ejecución npm para ver la salida de error en la terminal:
Habilitar la extensión Flow dentro de cualquier editor de texto de su elección mostrará los errores en su editor a medida que codifica.
Flow también utiliza la inferencia de tipos para determinar cuál debería ser el valor esperado de una expresión.
Por ejemplo:
// @fluir
funciónhacer algo(valor) {
valor de retorno * "Hola";
};
dejar resultado = hacerAlgo(6);
No puede ejecutar operaciones aritméticas entre el número seis y la cadena Hola.
la salida de flujo de ejecución npm será un error:
Desarrollo con TypeScript
La sintaxis de tipos de TypeScript es muy similar a la de Flow. Puede definir tipos de variables y funciones con anotaciones de tipo tal como lo haría en Flow.
TypeScript se envía con varias otras funciones similares a Flow, como la inferencia de tipos.
Tome el ejemplo de código TypeScript:
// Texto mecanografiado.ts
escriba Resultado = "aprobar" | "fallar"
funciónverificar(resultado: Resultado) {
si (resultado "aprobar") {
consola.log("Aprobado")
} demás {
consola.log("Fallido")
}
}
Tu puedes correr tsc Mecanografiado.ts para compilar este código en JavaScript estándar.
Este sería el mismo código TypeScript compilado en JavaScript estándar:
funciónverificar(resultado) {
si (resultado "aprobar") {
consola.log("Aprobado")
} demás {
consola.log("Fallido")
}
}
Pros y contras de TypeScript y Flow
Ahora sabe cómo comenzar a usar ambas herramientas en su proyecto de JavaScript. Debe conocer los pros y los contras de usar cada uno.
Integración
El proceso de configuración para usar Flow es algo más complejo que el de TypeScript. Deberá configurar un compilador de JavaScript como Babel o flow-remove-types para eliminar los tipos de flujo de su código. TypeScript incluye un compilador para convertir código TypeScript a JavaScript, lo que facilita la integración.
TypeScript tiene herramientas mucho mejores y la mayoría de los marcos de JavaScript lo admiten de forma predeterminada. Los IDE más populares brindan soporte de primera clase para TypeScript. Flow también es compatible, pero requiere un complemento especial.
Comunidad
A diferencia de Flow, los marcos de JavaScript como React, React Native, Vue y Angular admiten TypeScript de forma inmediata.
Esta adopción generalizada y la gran comunidad dan como resultado mejores recursos de aprendizaje, actualizaciones y soporte de herramientas.
Flexibilidad
Flow actúa como un verificador de tipos que funciona para advertirle sobre un código potencialmente incorrecto. TypeScript evita que escriba código incorrecto y tiene un sistema de tipo estricto. TypeScript también admite encapsulación de objetos, que ayuda a mantener manejable el código complejo. Flow no tiene esta función.
Servicios
TypeScript proporciona todos los servicios del lenguaje JavaScript, como la refactorización de código y la finalización automática. Flow es un verificador de tipos estáticos que proporciona una comprensión y un análisis profundos de su código escrito.
Flow puede trabajar con los módulos y bibliotecas importados de su proyecto y discernir cómo afectan su código. Por ejemplo, puede detectar y lanzar una advertencia cuando falta una biblioteca requerida en su proyecto o cuando intenta acceder a una definición que no existe.
¿Qué verificador estático debería usar?
Hay muchos argumentos válidos para usar cada herramienta porque cada una tiene características diferentes. Algunos pueden ser de máxima prioridad para un desarrollador y de baja prioridad para el otro. Ambas herramientas funcionan bien en sus propios aspectos y ofrecen ventajas para su uso.
Debe examinar los requisitos de su proyecto y tomar una decisión informada basada en ellos.