Alternatives to TypeScript

Rate this content
Bookmark

While TypeScript is currently the most popular static type checker for JavaScript, there are alternatives. In this talk, we'll look at Flow.js and Hegel, and review the similarities and differences among the three. Doing this will put TypeScript in perspective, and maybe help explain why the TS team made certain design decisions.

8 min
29 Apr, 2022

AI Generated Video Summary

This Talk explores alternatives to TypeScript such as Clojure, Flow, and Hagel, highlighting their unique features and syntax. Flow and Hagel make finer distinctions between types and prioritize safety. TypeScript offers quick fixes for inferring types. Hagel aims for fewer type annotations and increased safety. These alternatives can provide insights and understanding of TypeScript.

1. Introduction to Alternatives

Short description:

Hello, and welcome to my Talk, Alternatives to TypeScript. I've been using TypeScript for six years now and have contributed to it as well. Today, I'll be discussing some alternatives like Clojure, Flow, and Hagel. Clojure is known for optimizing JavaScript, while Flow and Hagel have their own unique features and syntax compared to TypeScript. For example, Flow and Hagel use a colon for generic type constraints, have a prefix union question mark operator, and allow parameter names in function types. They also have their own utility types, while TypeScript uses aliases for type manipulation. Additionally, Hagel doesn't have an any type and uses the unknown type instead. Flow has both any and mixed types, while TypeScript has void and undefined types. Flow and Hagel also make finer distinctions between types, such as primitives, arrays, functions, and object literal types. Let's dive into the details!

Hello, and welcome to my Talk, Alternatives to TypeScript. While I'm a big fan of TypeScript, no language exists in a vacuum. They all influence and inspire each other. Who am I? My name is Ashley Claymore and I work as a software engineer at Bloomberg. I've been using TypeScript for six years now, meaning I've got to see how much it's evolved. I've also contributed to TypeScript and I'm a TC39 delegate.

So what are some of the alternatives? We have Clojure, we have Flow and we also have Hagel. People might be more familiar with the Clojure compiler as a JavaScript optimizer, and that's because it does really good job of optimizing JavaScript. Projects like React, which use Flow as the type checker, they then also use Clojure to optimize the code. Clojure does also have a type checker and it supports either JS doc or this more minimal start of type comment that I'm showing here. As far as I could tell, there isn't a Clojure language server that gets the errors to show up interactively, instead you run the compiler more like a traditional compiler. Unfortunately I only have a few minutes, I'm not going to have time to dig further into Clojure but if you're interested, please do go check it out.

Okay, there's a big block of code here and don't worry about trying to read it. The important thing I'm trying to show is that in this whole snippet, it's syntactically valid in all three, Hagel, Flow and TypeScript. This tells us they all have a similar look and feel to them, but they do diverge and for the rest of this talk, what I'm going to do is just going to give you a flavor of how they are different to each other. So for example, in Flow and Hagel, they're generic type constraints. They use a colon instead of an extends keyword. They also have this prefix union question mark operator, and they also allow parameter names to be emitted in function types. Flow primarily and Hagel exclusively use their built-in utility types when you're doing type manipulation instead of having some extra additional dedicated syntax for doing that. And then, these utility types are implemented directly in their compilers. If you compare that to the TypeScript approach, where almost all of the utility types are aliases for the syntactic way of doing that type manipulation, things like map types and conditional type syntax. If I create a type hierarchy diagram, that lets us compare a few differences in how the systems model their types. One time that Hagel is taking a different approach is that it doesn't have an any type. The closest you can get is to the safer unknown type. Flow does have any, and their unknown type, they call that mixed instead. And Flow also calls their bottom type empty instead of never. Where TypeScript has both a void and an undefined type, Flow only has void and Hagel only has undefined. TypeScript also put their object literal type much higher up, up above the primitives, whereas Flow and Hagel make this finer distinction between what's a primitive, array, a function, and what object literal types describe. I have an example of that coming up. Firstly, Flow and Hagel have this concept that types can be closed by default.

2. Type Checking and Safety

Short description:

In this example, if additional properties are passed in, it's treated as an error. To allow additional properties, add dot, dot, dot to the type. Flow and Hagel have finer type distinctions. They flow types from call sites, even without annotations. Hagle checks functions by looking at their implementation. TypeScript offers quick fixes for inferring types. Flow and Hagle strive for safety, making subtle distinctions. Hagle's goal is fewer type annotations and increased safety. It infers fixed-length arrays. Other tools' approaches can help understand TypeScript.

So, in this example, because I only mentioned the path property, when values are passed in that have additional properties, that's treated as an error, even if it's not done inline. If you're okay with having additional properties passed in, you need to add dot, dot, dot to the type. That tells us it's now an open type.

This is an example that's coming up. It shows how Flow and Hagel treat their object literal type I'm passing a string and trying to pass an array to a function where I said give me something with a length property. As JavaScript developers, we know these things, you can access a length property, but that's getting an error here. That's because of that finer distinction between these types. If we need to include them, then I have to explicitly say all string or array or function to say I expect these types to also be okay.

One of the big selling points is that it will flow the types being passed into a function from the call sites. That allows it to check code even if it doesn't have a type annotation. One thing to be aware of with this is that when you add a new call to a function is that that impacts the influence of the same calls to that function in the same file. So here where it's previously inferring a string return type, that's now inferring a string or number because I've introduced a new call that's passing in a different type. Hagle also had a name to be able to check functions even if they don't have type annotations but they took a different approach. Instead, looking at the function implementation, it built up a generic signature that can be reused. Another thing I saw here is that Hagle won't allow it to implicitly infer conversion from number to string. Instead, it must be explicit. TypeScript took a different approach. While it can infer the types for functions without annotations, instead, that's offered as a quick fix instead of using that logic as part of the core type checking. And a general theme that I felt when I was looking at these languages, it seems that Flow tries to be safer than TypeScript, and then Hagle again tries to be more safe than Flow. And Flow and Hagle's more sound interpretation of types can have it can be really subtle. For example, in the type I'm showing here, Flow and Hagle make the technically more sound distinction between these two types, whereas in many situations, TypeScript allows you to use them interchangeably because in many cases, it is okay to use them interchangeably. And then Hagle's goal of not requiring as many type annotations combined with this increased emphasis and focus on safety, it results in a different feel to the JavaScript you write. For example, array literals are inferred as a fixed length double, no need for as const. Hagle also reports an error that I'm not using the return value of push, the new length. I have to use a void expression to make it explicit that I'm doing this for a side effect and not interested in the return value.

Okay. That was a really lightning-fast exploration of these other tools. I hope the one thing I've shown is even though they all start with this same underlying challenge of statically type checking JavaScript, they all have their unique and equally valid approaches. I find that really fascinating. I feel it demonstrates how much creativity pours into these tools. For me, personally, looking at those other tools, helped me better understand TypeScript. So, for people that are TypeScript developers that aren't using these tools, I still think it's worth checking them out. I hope you'll find it interesting as well.

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
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
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
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.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
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
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
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.
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
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.