For the past couple of years, the main way to run scripts written in TypeScript has been with 

. However, now we have something faster and more modern - 

It's very fast and very easy to start using today.

 makes it easy to run arbitrary code or tests without needing to 

 your whole project. It's a great way to improve your development workflow.

In 2 mins or less, let me show you exactly how to use it:

echo "console.log('hello world')" > hello-world.ts

After that, you should see the following output in your terminal:

And with that new knowledge, you can now migrate your project's scripts over from Bash to TypeScript. Woohoo!

This article walks you through running scripts with TypeScript and esr as an alternative to ts-node.

How to Run Scripts with TypeScript and esr

Interfaces: one of the most used types in everyday TypeScript. Knowing what it is and how to use it is important to becoming a proficient TypeScript developer and writing production-ready code.

By learning what they are and how to use them in the real world, you’ll be able to start contributing to TypeScript codebases much faster. You might even learn a trick or two to show off to a friend!

If you want to jump straight into code examples, take a look at these TypeScript playground links:

When I learn something new, I always try to connect it to something I already know. That way, it’s easier for my brain to remember it.

Let’s try to understand Interfaces using something we’re all familiar with: tweets.

What is a tweet exactly? Well, it’s a social media post that may contain text and/or images/videos. When we look at how tweets are represented as data according to the 

We believe the best future version of our API will come from building it with YOU. Here’s to another great year with everyone who builds on the Twitter platform. We can’t wait to continue working with you in the new year. https://t.co/yvxdK6aOo2

NOTE: this structure has been slimmed down for the purpose of the explanation. See the Twitter API 

 to see all properties on the tweet object.

Okay, so what’s an interface? It’s a way to describe the shape of a data structure. In this case, we can represent "public_metrics" as an interface called PublicMetrics:

As you can see, the interface lets you know the 

, we know it has four properties which are all of type 

. Very helpful when receiving this information from an API and then displaying it on the frontend.

But this isn’t the best example to showcase TypeScript. Why? You’d have to maintain these interfaces on both the client-side and the server-side, so you’d have duplicated types. Instead, there are tools like 

 that can generate these types from the API for you.

Let’s look at another Twitter-inspired example:

As you can see, we can use an interface to define what a function takes in (

You can think of Interfaces like contracts. They are used to ensure data structures are used according to their shapes.

 used in the first interface. That’s a 

 comment, which is helpful when you want to give more information about a type. I believe it’s good practice to use them when things might not be obvious. In our case, our team members will know this is not just any 

s that point to image-like attachments related to the tweet.

We’ve discussed hypothetical Interfaces, but now let’s look at some in the wild. What does an Interface in an open source project look like?

 on the TypeScript Playground or view the source on GitHub 

These are a list of flags that can be passed to the 

 CLI. As you can see, all of these are optional because they have the 

 after each key. This is a great example of an Interface in the wild because:

Recommendation: spend five minutes looking for other Interface examples in the 

 until you feel comfortable knowing what they are and how they’re used.

For more in-depth info on interfaces, take a look at the TypeScript handbook section 

 for the inspiration. When he was teaching others Solidity, he used real-world examples like tweets and that’s where this idea originated.

As we saw today, Interfaces are used to describe the shape of things. We used some hypothetical examples in the context of Twitter. Then we dove into the wild west of open source on GitHub and looked at a real-world example in a popular open source project.

Play around with Interfaces and get comfortable with them. They’re a great tool for writing production-ready TypeScript, and one you want to be familiar with.

What are Interfaces in TypeScript, and When Should you use Them

The other day while browsing Twitter, I saw that Josh Goldberg 

And later said the root cause was “sketchy TypeScript types.”

You hear TypeScript enthusiasts praise the value of TypeScript and warn you never to use 

. You believe it, but it’s helpful when they can point to a specific example. This was it! This was a real example in a popular open-source project.

) once said the best way to level up is by reading source code.

 type error in production, study it, and learn from it! Brilliant!

In this article, we’re going to dive into a real scenario where using 

 is an ambiguous TypeError that pops up during Next.js development if/when a network request to 

/_next/static/development/_devPagesManifest.json

Sounds like an edge case, right? Well, you’d think so, but the 

 first showed up in September 2020 and received 41 👍🏼. From a maintainer’s perspective, that’s a significant number of affected users!

Josh gives us a list of steps to reproduce the issue:

Start any Next.js app in development mode

Visit localhost:3000 (or equivalent) in Chrome (or equivalent)

The key part is blocking the request in the network tab. He also provided a 

 if you want an instant way to see this. And when you do this, you see the error on the right:

flaky machine network layer (i.e. CI images)

Next.js doesn’t have control over those scenarios, but we can fix the sketchy type errors and improve the logging. First up, narrowing an 

packages/next/shared/lib/router/router.ts

, which would have caught this page crash. Why? Well, let’s follow the path.

this change in the code block above is inside 

, we have a scenario where we override the types and assert that a value is truthy when it may 

to be extra clear, the actual return type is 

that means it isn’t guaranteed to always return 

If you look near the bottom of this diff code block, you’ll see the use of the 

, which told TypeScript this value was not 

We know this is sketchy because the original author left a comment saying, “this could be 

He makes a small syntax cleanup using the 

, ||=, and cleans up the logic so that the fetch call either returns a value or throws an 

. This way, this.promisedDevPagesManifest is never undefined.

As we saw in this situation, the combination of 

 lead to unexpected behavior and an unhelpful error message. Luckily, Josh found a reliable way to reproduce it and took it upon himself to submit a pull request to make this better for users.

If you can’t avoid sketchy type errors for whatever reason, do this:

Add a comment in the code with a brief explanation and link to the issue

This way, it’s more clear to future developers that you realize you’re taking a shortcut. And with the issue, it’s easier to keep track of your tech debt.

Thanks for reading! Happy TypeScript’ing!

In this article, we’re going to dive into a real scenario where using any led to production errors in Next.js.

Careful Using any in TypeScript - Here’s What Can Happen

Enums are a concept that exists in TypeScript (not JavaScript) and can help you in certain situations.

What happens when you compile to JavaScript

We’ll create our own example and then find an example from an open source project. By the end, you’ll have enough knowledge to explain them to your coworker and know when to use them.

Before we dive into this concept, I want to talk about why you should even care. 

They’re part of what I would consider TypeScript fundamentals. Chances are you’ll either use them yourself or run into them while working in someone else’s codebase. Therefore, you should know what problem they solve and why someone would use them.

They let you define a set of constraints.

 is constrained to 4 directions: top, right, bottom, and left. If we were to build our own CSS parser in TypeScript, we could turn these rules into logical constraints using Enums.

As you can see, this gives us a way to define these constraints and use 

Let’s continue our dive into Enums with another example that you’re probably familiar with.

Take for example, the logic for determining whether or not you have a streak in Duolingo:

The outcome of that function could either be:

There is a gap between the days, rest streak

The days are the same; keep the streak as is

Since we have these states constrained to three specific actions, we can represent these using an Enum:

One difference between this example and the 

 because they are easier to debug at runtime. Why? Well, they’re constrained to a string literal instead of a number which would look something like this:

Both get the job done, but the string enum is better in my opinion because they align with my mental model of Enums. I associate them with strings since that’s what I expect. I also think this makes it easier to maintain and debug for other developers.

Speaking of debugging, let’s discuss what happens to Enums at compile time. First, we know that this concept or structure isn’t native to JavaScript. That means they have to be 

 shows you exactly what your code compiles to. Let’s add the 

Without getting into the weeds of everything happening in the transpiled code, we can see that in JavaScript, the structure is represented similar to this:

As you can see, there is nothing scary or surprising here. If we were to use the numeric enum like before, the output is a little bit more difficult to read:

Experiment with both and see which one you prefer.

. A large group of folks in the TypeScript community avoids them because you can use 

The biggest argument in favor of this format over TypeScript’s enum is that it keeps your codebase aligned with the state of JavaScript, and 

 enums are added to JavaScript, then you can move to the additional syntax.


The TypeScript Handbook even notes that using objects instead of enums keeps your codebase more in line with today’s JavaScript. This is my personal preference as well.


That said, they’re still used by many people. Here’s an example of a GitHub project in the Vue community called vue-vben-admin with 12.9k stars. They have a 

Keep these points in mind when deciding whether or not you should use them.

String Literals as an alternative to Enums

A real-world example that uses string literals as opposed to enums is the 

 attribute, “provides an image decoding hint to the browser.” There are only three valid values: 

. This is defined using a union type of string literals in the dom types 

As you can see, this achieves the same effect of enums but is less code and arguably easier to maintain.

For more in-depth info on Enums, take a look at these sections in the TypeScript handbook:

In summary, we discussed Enums and how they’re used. We looked at Enums in compiled JavaScript. Lastly, we talked about when you should use them, including some open source examples.

You’ve leveled up your TypeScript fundamentals and now understand an important concept in the language. This is valuable because you can now work with Enums in any codebase and also explain to others what they are and when to use them.

Now, play around with them and solidify this new knowledge with hands-on practice. 😄

I want to take a second to say thank you to 

 suggesting I add string literals as an alternative to enums.

In this article, we’ll look at enums. What are they, what happens when you compile to JavaScript, and when should you use them.  

What are Enums in TypeScript, and When Should you use Them

This article will explain union types in TypeScript using real-world examples and show you exactly how they’re used. We’ll even include TypeScript playground links for our examples. This way, you can quickly try them yourself. By the end, you’ll know how to use union types like the pros.

Sometimes requirements change in a project, and you need to modify your program to be more flexible. At the code level, this could be a function that now accepts a 

That seems kind of silly, though, doesn’t it?

This is where union types come to the rescue! They allow you to define a type using two or more types. Let’s do some refactoring:

As you can see, this is a lot simpler! And the flexibility in the parameter type annotation — 

 — allows our program to match our requirements! Woohoo!

This is the beauty of union types. And all you have to do is use the 

 symbol to denote a union. In our example, our union has two members: 

, meaning these are valid function calls:

As you can see, union types allow you to combine types to match your program. This is important because it allows you to do more with less code. And less code means less to maintain for you and your team. Later, we’ll dive into some examples from open source to see how they’re used in the real world.

Now that we’ve discussed the basics of union types let’s dive into some real-world examples from open source. The first one we’ll look at is from 

, the most popular code formatting tool in the JavaScript ecosystem. Specifically, we’ll look at an example from the codebase for Prettier’s VS Code extension:

 combines three string literals into a single type called 

. As you can see, union types can span more than two types.

The next example we’ll look at is from the 

. Both utilize union types. In the first, 

The second example creates a new type called 

. I like this example because it shows union types built using primitive types (aka 

The React types live in a central repository called 

. This repository contains many of the common types in the TypeScript ecosystem. Every time you run, 

, you are installing types from this repository. The alternative is to maintain the types in a library’s repo like how Prettier does. I believe the latter is the more common pattern these days.

As you can see, union types are very common in TypeScript. I didn’t spend much time finding these two examples. That’s because they’re used all over in the real world! Knowing how to use them to build more complex types will help you write better production-ready TypeScript. Maybe it’ll even help you write your own open-source library!

For more in-depth info on union types, take a look at these resources:

We went from not knowing what union types are to breaking down real examples from large open source projects like Prettier and React. As you saw, union types are everywhere. Shipping production-ready TypeScript code means you need the fundamentals down. Now that you know how to use union types, you can combine types which means less code to do more. More time to ship and less time maintaining bad code. Woohoo! Happy coding!

This article will explain union types in TypeScript using real-world examples and show you exactly how they’re used

What are Union Types in TypeScript, and How are They Used? 

This article will explain function overloads in TypeScript using real-world examples and show you exactly how they’re used. We’ll even include TypeScript playground links for our examples. This way, you can quickly try them yourself. By the end, you’ll know how to use union types like the pros.

Function overloads are a concept in programming languages that allows you to 

 a function with different call signatures. That means you can define the same function in more than one way. Here’s an example from the 

As you can see, the name stays the same, but the number of arguments and the meaning change in each variation. This can be handy if you are writing a function that accepts various types of arguments.

Later, we’ll take a look at some examples from open source and then explain when you should use them.

Examples of Function Overloads in Open Source

Function overloads are most commonly used in libraries like DOM, lodash, Blitz, and more, to name a few. Here’s an example from 

Let’s break down what’s happening. We have a function called 

 can be optional and a variety of different types, even a custom one called 

 (definition omitted for simplicity but defined 

). There are five overload signatures, each with its parameters and return types.

And we can see how it’s used by looking at 

. Here is one example that I’ve slimmed down:

 back. Pretty neat to learn about function overloads and see them used in a real project!

Sometimes it’s helpful to look at other examples when you need inspiration. Since I didn’t have time to break down every example, I leave you with a list:

Shout-out to the TypeScript community on Twitter for helping me crowd-source these examples:

It depends! Some folks (myself included) believe you can get by without them.

Most of the time, union types solve the problem.

 As John Reilly points out, they’re also easier to understand and closer to JS. Most of the examples we shared from the open source were from libraries. Therefore, if you’re building a typical production application, you might not need them.

If you decide to use them, remember that the order of your overloads matters. Put more specific overloads first:

. This is because TypeScript uses the first matching overload. Otherwise, it defaults to this “more general” one and never finds the other ones. Read more 

For more information on function overloads, take a look at these resources:

Overload Signatures and the Implementation Signature

What are Function overloads in TypeScript

We learned about function overloads and how they can be used to define multiple call signatures for your functions in TypeScript. They’re most often used in libraries like 

This new knowledge will serve you in understanding private codebases at companies you might work with in the future and open source libraries you might use. Now go out and write some TypeScript!

This article will explain function overloads in TypeScript using real-world examples and show you exactly how they’re used.

Define Multiple Call Signatures for Your Functions in TypeScript with Function Overloads

This article will explain generics in TypeScript using real-world examples and show you exactly how they’re used. We’ll even include TypeScript playground links for our examples. 

This way, you can quickly try them yourself. By the end, you’ll know how to use generics like the pros.

The best way for us to answer that is to start diving into an example. Let’s say you’re building an API called 

What if users want to use a different type for state, say a 

? Well, we could modify our signature to take a 

Better, but what if another user wants to use some type of 

? Wouldn’t it be nice if we could use something more generic? Ah-ha! This is where generics shine. Let’s refactor one last time.

 after the function name, kinda like defining an arg to a function, and then we can reference it throughout the rest of the signature! Now when we use this function, TypeScript will infer the type for 

Woohoo! Generics allow us to write more flexible functions, which is good for us and good for our end users. Let’s dive into some real examples from open source.

Continuing with React, let’s look at the type definition for 

 is a helper type that you can import from 

 to define types for your component props without having to manually type 

. Very handy! Looking at this, we see one generic called 

 for Props. This returns a new type and adds an optional property called 

Let’s look at one more example to solidify our understanding of generics.

When working with the DOM, there is a method on 

 where you pass in a tag name to create an instance of said element. 

When you use this function, you get an autocomplete list of valid HTML tags in your editor:

More common in libraries than applications

Based on my experience, you’ll find these more often in libraries than in applications you’re writing. Library authors need the flexibility that generics provide. It’s still important for you to know if you want to master TypeScript though.

TypeScript Generics for People Who Gave Up on Understanding Generics

We went from not knowing what union types are to breaking down real examples from large open source projects like Prettier and React. As you saw, union types are everywhere. Shipping production-ready TypeScript code means you need the fundamentals down. Now that you know how to use union types, you can combine types, which means less code to do more. More time to ship and less time maintaining bad code. Woohoo! Happy coding!

We learned about generics starting with a basic example inspired by 

 in React, before moving on to reading source code from real open source projects and breaking down how they use generics to write flexible type definitions.

While generics are more common in libraries than applications, they’re a powerful concept in TypeScript, and one you should take advantage of when needed. Now that you have this knowledge, go out and use generics in your code. And I’ll leave you with this great one-liner to describe generics:

Written Resources for Navigating the TypeScript Ecosystem

How to Run Scripts with TypeScript and esr

What are Interfaces in TypeScript, and When Should you use Them

Careful Using any in TypeScript - Here’s What Can Happen

What are Enums in TypeScript, and When Should you use Them

What are Union Types in TypeScript, and How are They Used?

Define Multiple Call Signatures for Your Functions in TypeScript with Function Overloads

Using Generics to Create Flexible Types in TypeScript

Why You Should Use String Literal Unions Over Enums in TypeScript

Why TypeScript Should Replace JavaScript in Your Tech Stack