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.

8 min
29 Apr, 2022

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

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

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Workshop
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher