10 TypeScript Features You Might Not Know
Recently TypeScript is increasingly gaining popularity and companies like Slack are praising their move to TypeScript. But with TypeScript shipping monthly updates to the language and its tools even a regular TypeScript developer might lose track of what is being added.
Here is a list of 10 of my favorite recent additions to the language since version 2.0:
This is a great feature if you want to start off a new TypeScript project. If you run in a folder:
TypeScript will automatically create a
tsconfig.json in your directory. The neat thing is that it automatically populates it will all available options (some of them commented out) and a description of the respective option. This is especially useful if you are new to TypeScript and want to get an overview of all options.
If you just want an overview of all available options you can also try out this command:
Have you found yourself in the situation where you needed two separate
tsconfig.json files for example for tests but most of the options were shared? With the
extends option we can specify a configuration file that we want to base our current file on.
As an example lets say we typically compile our code with a target of
But we want to create a separate version that is
es5 compatible. We can extend from the new config from the existing one:
If we now run the compiler with this file it will take the flags from the
tsconfig.json and override the
es5 and add the
outDir option. You can specify a certain config file in the TypeScript compiler with the
Typically you type objects in two different ways in TypeScript. Either by using
type or by using
On the first glimpse there is not really a difference except of some minor syntax differences. However,
interface has a few benefits. Namely that we can both
extend as well as
Addtionally you will be able to redefine an interface multiple times which means you will be able to add addtional parameters at different parts in your code.
This is one of my favorite recent additions that was added version
2.1. Let’s say we have a type of an interface
We want to write a
set method that retrieves a key and a value. With
keyof we can create “dynamically” a type that represents all possible keys of
Now we can write a function that is typed and automatically ensures that both
value have the correct types:
Now we have a function that will not only check that we are passing in a valid value for
key but also that the type of
value is the right one for the respective option.
Now that we know about the power of
keyof let me show you one more awesome thing related to this. This is not limited to types generated with
Let’s say we have our types from earlier:
We want to create a new type of a map that tracks when the respective value has last been updated. We basically need a new type that maps for every key of the
Configuration interface to a
Date object. We can do this with mapped types really easily:
We can do the same with any other union-type as well:
Mixin classes are an addition that came in TypeScript version
2.2 in February 2017. It’s a way for you to extend classes in a dynamical fashion. Let’s say we have a set of 2D classes:
Now we want to have an easy way to turn these classes into classes ready for the third dimension. This is what we can use mixin classes for. Before we can write one we first need to add a quick helper type though:
With this type given we can create a function that receives a
Constructor as a base and returns an anonymous class that extends from this base class and adds a
Given this function we can then easily create new classes based on our existing ones in a dynamic fashion:
Object has been around as a type for quite a while but in
2.2 TypeScript introduced a new type
object. The difference in spelling is minimal but they represent completely different groups of objects.
Object is basically anything that is not
null. On the contrary
object represents anything that isn’t a primitive type (
boolean, etc.) plus
The reason why this type exists is that there is a set of functions like
Object.create that get an
object as argument. With the introduction of
object as a type we can now properly type these function calls and catch mistakes early.
If you are a fan of
await but were bummed out that you had to support ES5 or even ES3 as your target, you will love this. TypeScript is able to transpile
await to both ES5 and ES3 as long as you have a
Simply add the respective libs to the
lib property in the
tsconfig.json and adjust the
target to your preferred target:
From that moment on you can use
await simply in your code:
This is a feature that has been long in the making. In fact some of the issues date back to 2014 and earlier. Now in TypeScript version
2.4 we are finally getting them: string valued enums
Using them is super straight forward:
In this case
myFavoriteColor will be of the value
'#00ff00' during runtime and it has the type of
Color.Green since it’s a constant. For the
chosenColor, TypeScript will automatically walk one step up and assign it the type
Color since it could change over time. The value assignned during runtime will be
'#ff0000' as expected.
The important part is that for string valued enums you will need an initializer while numeric ones can be inferred. However, this allows you to also mix the two:
In this case we specify a numeric value for
404 and because
ErrorCodes.MethodNotAllowed follows in the listing, it will automatically be assigned
ErrorCodes.Unknown, however, is assigned to a string value of
'unknown'. This is only possible due to the strict enforcing of having an initializer for string values.
If you pass the
--allowJs flag to the TypeScript compiler or if you enable it in the
TypeScript won’t perform any type checks on these files unless you pass the
--checkJs flag that was introduced in TypeScript version
2.3. If you want to enable this only for specific files you can simply add a comment to the top of your file:
Similarly you can disable it on selected files using
// @ts-nocheck of for a specific line by adding above the line
These features also work in combination with the respective editor integrations like in VS Code. It’s super useful if you want to move your code base over to TypeScript but you can’t change the actual files to TypeScript yet for whatever reason.
This is just a small overview of a few features that are currently in TypeScript (or are coming this month) that I’m excited about. But there is much more planned, including Variadic types, ambient decorators (decorators that are only there during compile time) but don’t affect runtime and much more. A great overview of what’s planned is the Roadmap in the TypeScript wiki.
I would love to hear what your experience with TypeScript is, why you do or do not like it and what your favorite TypeScript feature is. Simply shoot me a message on Twitter @dkundel.