Alternativas a TypeScript

Rate this content
Bookmark

Mientras TypeScript es actualmente el verificador de tipos estáticos más popular para JavaScript, existen alternativas. En esta charla, analizaremos Flow.js y Hegel, y revisaremos las similitudes y diferencias entre los tres. Haciendo esto, pondremos a TypeScript en perspectiva y tal vez ayudemos a explicar por qué el equipo de TS tomó ciertas decisiones de diseño.

FAQ

Ashley Claymore es un ingeniero de software en Bloomberg que ha estado usando TypeScript por seis años y ha contribuido a su desarrollo. También es delegado de TC39.

Las alternativas a TypeScript mencionadas incluyen Clojure, Flow y Hagel, cada una con características y enfoques únicos para la optimización y verificación de JavaScript.

Clojure es conocido por hacer un buen trabajo optimizando JavaScript, siendo usado en proyectos como React junto con Flow para verificación de tipos y optimización del código.

Flow y Hagel utilizan tipos de utilidad incorporados para la manipulación de tipos y tienen un enfoque más fuerte en la seguridad. Por ejemplo, Hagel no tiene un tipo 'any', mientras Flow tiene un tipo 'mixed' en lugar de 'unknown'.

TypeScript usa casi exclusivamente alias de tipos para manipulaciones de tipos, como tipos de mapeo y tipos condicionales, mientras que Flow y Hagel implementan estos tipos directamente en sus compiladores.

TypeScript coloca su tipo literal de objeto más arriba que los tipos primitivos, mientras que Flow y Hagel hacen una distinción más fina entre tipos primitivos, arreglos, funciones y tipos literales de objetos.

Un tipo cerrado en Flow y Hagel significa que se considera un error pasar valores con propiedades adicionales no especificadas en la definición del tipo, a menos que se indique explícitamente que el tipo es abierto agregando tres puntos al tipo.

Ashley Claymore
Ashley Claymore
8 min
29 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora alternativas a TypeScript como Clojure, Flow y Hagel, resaltando sus características y sintaxis únicas. Flow y Hagel hacen distinciones más finas entre tipos y priorizan la seguridad. TypeScript ofrece soluciones rápidas para inferir tipos. Hagel apunta a menos anotaciones de tipo y mayor seguridad. Estas alternativas pueden proporcionar ideas y comprensión de TypeScript.

Available in English: Alternatives to TypeScript

1. Introduction to Alternatives

Short description:

Hola, y bienvenidos a mi Charla, Alternativas a TypeScript. He estado usando TypeScript durante seis años y también he contribuido a él. Hoy, hablaré sobre algunas alternativas como Clojure, Flow y Hagel. Clojure es conocido por optimizar JavaScript, mientras que Flow y Hagel tienen sus propias características y sintaxis únicas en comparación con TypeScript. Por ejemplo, Flow y Hagel utilizan dos puntos para las restricciones de tipo genérico, tienen un operador de interrogación de unión de prefijo y permiten nombres de parámetros en los tipos de función. También tienen sus propios tipos de utilidad, mientras que TypeScript utiliza alias para la manipulación de tipos. Además, Hagel no tiene un tipo any y en su lugar utiliza el tipo unknown. Flow tiene tanto los tipos any como mixed, mientras que TypeScript tiene los tipos void y undefined. Flow y Hagel también hacen distinciones más finas entre tipos, como tipos primitivos, arreglos, funciones y tipos literales de objetos. ¡Vamos a profundizar en los detalles!

es Ashley Claymore y trabajo como ingeniero de software en Bloomberg. He estado usando TypeScript durante seis años, lo que significa que he podido ver cómo ha evolucionado. También he contribuido a TypeScript y soy delegado de TC39. Entonces, ¿cuáles son algunas de las alternativas? Tenemos Clojure, tenemos Flow y también tenemos Hagel. Es posible que las personas estén más familiarizadas con el compilador de Clojure como optimizador de JavaScript, y eso se debe a que hace un buen trabajo optimizando JavaScript. Proyectos como React, que utilizan Flow como verificador de tipos, también utilizan Clojure para optimizar el código. Clojure también tiene un verificador de tipos y admite tanto JS doc como este comentario de tipo más minimalista que estoy mostrando aquí. Hasta donde pude ver, no hay un servidor de lenguaje Clojure que muestre los errores de forma interactiva, en su lugar se ejecuta el compilador de manera más tradicional. Desafortunadamente, solo tengo unos pocos minutos, no voy a tener tiempo para profundizar más en Clojure, pero si estás interesado, por favor, échale un vistazo. Bien, aquí hay un gran bloque de código y no te preocupes por intentar leerlo. Lo importante que estoy tratando de mostrar es que en este fragmento completo, es sintácticamente válido en los tres, Hagel, Flow y TypeScript. Esto nos dice que todos tienen una apariencia y sensación similar, pero divergen y durante el resto de esta charla, lo que voy a hacer es darte una idea de cómo son diferentes entre sí. Por ejemplo, en Flow y Hagel, tienen restricciones de tipo genérico. Utilizan dos puntos en lugar de la palabra clave extends. También tienen este operador de interrogación de unión de prefijo y también permiten que se emitan nombres de parámetros en los tipos de función. Flow principalmente y Hagel exclusivamente utilizan sus tipos de utilidad incorporados cuando se realiza la manipulación de tipos en lugar de tener una sintaxis adicional dedicada para hacer eso. Y luego, estos tipos de utilidad se implementan directamente en sus compiladores. Si comparamos eso con el enfoque de TypeScript, donde casi todos los tipos de utilidad son alias de la forma sintáctica de hacer esa manipulación de tipos, cosas como los tipos de mapeo y la sintaxis de tipos condicionales. Si creo un diagrama de jerarquía de tipos, eso nos permite comparar algunas diferencias en cómo los sistemas modelan sus tipos. Una vez que Hagel está tomando un enfoque diferente es que no tiene un tipo any. Lo más cercano que puedes obtener es el tipo unknown más seguro. Flow tiene any y su tipo unknown lo llaman mixed en su lugar. Y Flow también llama a su tipo inferior empty en lugar de never. Donde TypeScript tiene tanto un tipo void como un tipo undefined, Flow solo tiene void y Hagel solo tiene undefined. TypeScript también coloca su tipo literal de objeto mucho más arriba que los primitivos, mientras que Flow y Hagel hacen esta distinción más fina entre lo que es un primitivo, un arreglo, una función y qué tipos literales de objetos describen. Tengo un ejemplo de eso que viene. En primer lugar, Flow y Hagel tienen este concepto de que los tipos pueden

2. Type Checking and Safety

Short description:

En este ejemplo, si se pasan propiedades adicionales, se considera un error. Para permitir propiedades adicionales, agrega tres puntos al tipo. Flow y Hagel tienen distinciones de tipo más finas. Fluyen tipos desde los sitios de llamada, incluso sin anotaciones. Hagel verifica las funciones al analizar su implementación. TypeScript ofrece soluciones rápidas para inferir tipos. Flow y Hagel se esfuerzan por la seguridad, haciendo distinciones sutiles. El objetivo de Hagel es tener menos anotaciones de tipo y aumentar la seguridad. Infieren matrices de longitud fija. Los enfoques de otras herramientas pueden ayudar a comprender TypeScript.

está cerrado. Entonces, en este ejemplo, porque solo mencioné la propiedad de ruta, cuando se pasan valores que tienen propiedades adicionales, se considera un error, incluso si no se hace en línea. Si estás de acuerdo en permitir que se pasen propiedades adicionales, debes agregar tres puntos al tipo. Eso nos indica que ahora es un tipo abierto. Este es un ejemplo que viene a continuación. Muestra cómo Flow y Hagel tratan su tipo literal de objeto Estoy pasando una cadena e intentando pasar una matriz a una función donde dije dame algo con una propiedad de longitud. Como desarrolladores de JavaScript, sabemos que se puede acceder a una propiedad de longitud, pero aquí se produce un error. Esto se debe a esa distinción más fina entre estos tipos. Si necesitamos incluirlos, entonces tengo que decir explícitamente todo string o array o function para decir que también espero que estos tipos estén bien. Uno de los grandes puntos de venta es que fluirá los tipos que se pasan a una función desde los sitios de llamada. Esto le permite verificar el código incluso si no tiene una anotación de tipo. Una cosa a tener en cuenta con esto es que cuando agregas una nueva llamada a una función, eso afecta la influencia de las mismas llamadas a esa función en el mismo archivo. Entonces, donde anteriormente estaba inferiendo un tipo de retorno de cadena, ahora está inferiendo un tipo de cadena o número porque he introducido una nueva llamada que pasa un tipo diferente. Hagel también tenía un nombre para poder verificar funciones incluso si no tienen anotaciones de tipo, pero tomaron un enfoque diferente. En cambio, al analizar la implementación de la función, construyó una firma genérica que se puede reutilizar. Otra cosa que vi aquí es que Hagel no permitirá inferir implícitamente la conversión de número a cadena. En cambio, debe ser explícito. TypeScript tomó un enfoque diferente. Si bien puede inferir los tipos de las funciones sin anotaciones, en cambio, se ofrece como una solución rápida en lugar de utilizar esa lógica como parte de la verificación de tipos principal. Y un tema general que sentí cuando estaba mirando estos lenguajes, parece que Flow intenta ser más seguro que TypeScript, y luego Hagel intenta ser más seguro que Flow. Y el enfoque más sólido de Flow y Hagel en la interpretación de tipos puede ser realmente sutil. Por ejemplo, en el tipo que estoy mostrando aquí, Flow y Hagel hacen la distinción técnicamente más sólida entre estos dos tipos, mientras que en muchas situaciones, TypeScript permite usarlos indistintamente porque en muchos casos está bien usarlos indistintamente. Y el objetivo de Hagel de no requerir tantas anotaciones de tipo combinado con este mayor énfasis y enfoque en la seguridad, resulta en una sensación diferente al JavaScript que escribes. Por ejemplo, los literales de matriz se infieren como un doble de longitud fija, no es necesario usar as const. Hagel también informa un error de que no estoy usando el valor de retorno de push, la nueva longitud. Debo usar una expresión void para dejar claro que lo estoy haciendo por un efecto secundario y no estoy interesado en el valor de retorno. Bien. Esa fue una exploración realmente rápida de estas otras herramientas. Espero que lo que haya mostrado sea que aunque todas ellas comienzan con este mismo desafío subyacente de verificar estáticamente JavaScript, todas tienen enfoques únicos y igualmente válidos. Me parece realmente fascinante. Siento que demuestra cuánta creatividad se vierte en estas herramientas. Para mí, personalmente, al mirar esas otras herramientas, me ayudó a comprender mejor TypeScript. Entonces, para las personas que son desarrolladores de TypeScript y no están utilizando estas herramientas, aún creo que vale la pena echarles un vistazo. Espero que también te resulte interesante. Muchas gracias por escuchar.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
JavaScript en el navegador se ejecuta muchas veces más rápido de lo que lo hacía hace dos décadas. Y eso sucedió porque los proveedores de navegadores pasaron ese tiempo trabajando en intensivas optimizaciones de rendimiento en sus motores JavaScript.Debido a este trabajo de optimización, JavaScript ahora se está ejecutando en muchos lugares además del navegador. Pero todavía hay algunos entornos donde los motores JS no pueden aplicar esas optimizaciones de la manera correcta para hacer las cosas rápidas.Estamos trabajando para resolver esto, comenzando una nueva ola de trabajo de optimización de JavaScript. Estamos mejorando el rendimiento de JavaScript para entornos completamente diferentes, donde se aplican reglas diferentes. Y esto es posible gracias a WebAssembly. En esta charla, explicaré cómo funciona todo esto y qué vendrá a continuación.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
No pensamos en React como si tuviera sus propios tipos. Pero los tipos de React son una parte fundamental del marco de trabajo - supervisados por el equipo de React, y coordinados con las principales lanzamientos de React.En esta charla de codificación en vivo, veremos todos los tipos que te has estado perdiendo. ¿Cómo obtienes el tipo de props de un componente? ¿Cómo sabes qué ref toma un componente? ¿Deberías usar React.FC? ¿Y qué pasa con JSX.Element?Te irás con un montón de ideas emocionantes para llevar a tus aplicaciones de React, y esperamos que con una nueva apreciación por las maravillas de React y TypeScript trabajando juntos.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante