What’s new with TypeScript 3.9

Sébastien Dubois.
May 13 · 5 min read

TypeScript keeps going at lightning speed. My book about TS 3.x has been released in December and now 3.9 is already out! Phew!

Let’s look at what this new release has in store for us!

Speed!

As stated in the release notes, 3.9 is coming with many performance improvements. The TypeScript team and various contributors have fixed multiple issues around this.

They’ve resolved issues with large unions/intersections/conditional types as well as with mapped types. Check out the release notes for a small list of the related pull requests (unsurprisingly many of those were initiated by Anders himself :p).

Daniel Rosenwasser, the program manager for TypeScript, announces a ~40% reduction in compile times for material-ui, which is a rather large project that was experiencing slow build times. I don’t know about you, but this sounds awesome.

Daniel also mentions that TS 3.9 addresses a problem with file renaming. Previously, it took quite a long time to determine which import statements had to be updated after file rename operations. I’ve witnessed this quite a few times and it was indeed annoying; one less problem to worry about!

Having switched to the beta recently, I can indeed confirm that the compilation times are better now; even though my project is not that big!


@ts-expect-error

Sometimes, when writing test code, we need to test things that the TypeScript compiler won’t let us.

For instance if you write APIs that will get consumed by clients written in JavaScript, your code might get called incorrectly and it’s useful to test such cases as well.

Let’s take a look at a concrete example taken from my current project:

In the Jest test above, I’m ensuring that the authentication service gracefully handles invalid input.

On line 3, the TypeScript compiler would have refused to compile my code if I didn’t use the “as unknown as …” trick.

Currently, this is one way to keep the compiler happy. The thing is that after casting something to unknown, we can cast it again to anything else and the compiler won’t mind at all. Even if not perfect, this works and is useful in the context of testing.

The other approach is to add a ts-ignore comment above the concerned line:

// @ts-ignore

The problem is that this simply tells the compiler to ignore the whole line, which is even worse in this case since other errors could creep in and wouldn’t be noticed by TypeScript.

With TypeScript 3.9, we’ll have one more option: adding a ts-expect-error comment above the line:

// @ts-expect-error

This new “suppression comment” tells TypeScript not to report the error (if there was one), but to warn us if there was actually no error.

This is super useful in my scenario, as I could avoid using the “as unknown” trick and just do this instead:

The thing to be careful about though is how you use this feature. In the example above, I could mistype the name of the service variable, the name of the handleError method or the name of the subscribe method and in all of those cases, the compiler wouldn’t mind much.

So it is better to split up the line so that the compiler knows exactly where to expect an error. Here’s a safer version:

This way, the compiler expects an error only for the handleError method argument, which is exactly what I want in this test.

I think that I’ll stop using the “as unknown as…” trick and instead use this neat new feature, as it feels somewhat safer to me.

And of course, I’ll continue to avoid using ts-ignore at all costs ;-)

Uncalled Function Checks in Conditional Expression

Apparently, TS 3.7 has started reporting errors when it detects that we forgot to call a function in an if statement.

Here’s the example from the release notes:

As you can see above, in the if statement a poor soul has forgotten to actually call the hasImportantPermissions function. Since the function is indeed defined, it is always truthy. Fortunately with TypeScript 3.7 and onwards, the compiler notices it and errors out. Neat.

I actually didn’t notice this in the release notes and must’ve been lucky never to face this issue.

With TypeScript 3.9, the support for detecting such nasty issues has been extended to also cover ternary conditionals. Awesome!

I rarely forget to call my functions, but now I’m reassured that even if it happens to me, TypeScript will help me fix it! :)

Editor improvements

As I’ve explained in my previous article, the TypeScript compiler’s architecture has been designed so as to make it a breeze for code editors and IDEs to include TypeScript support. As a matter of fact it’s also thanks to this that editors like VSCode provide awesome JavaScript support, helping fix issues for JavaScript code, even without coding using TypeScript.

TypeScript 3.9 brings new improvements here.

For one, VSCode now supports switching between TypeScript versions. As the release notes state, note that there’s also a nightly version of the TypeScript extension that you can use to benefit from the latest improvements.

By the way, did you know that I maintain a set of VSCode extension packs? Of course there’s one for JavaScript/TypeScript development ;-)

For all the details about the editor improvements, you’d better take a look at the release notes.

To summarize:

  • Better/more homogeneous CommonJS auto imports (yay!)
  • Code actions that now preserves newlines (this one is nice, but I have my lovely Prettier to take care of all that code formatting nonsense)
  • Support for “solution-style” tsconfig.json files

Breaking changes

As sad as it may sound, TS 3.9 also includes some breaking changes. I won’t cover these in this article, but might write a follow-up if there is interest. On my end I’ve been lucky as it seems that I don’t need to adapt my project.

Anyway, do check out the release notes if you want to learn about those!

Conclusion

In this article, I’ve briefly explained the new features that I feel are most interesting in the latest TypeScript release.

I’ve been using the beta quite happily. Also, the update was a breeze. So go ahead and give it a try!

That’s it for today!

Liked this article? Click that “Like” button below to see more of it and ensure others see it too!

PS: If you want to learn tons of other cool things about software/Web development, TypeScript, Angular, React, Vue, Kotlin, Java, Docker/Kubernetes and other cool subjects, then don’t hesitate to grab a copy of my book and to subscribe to my newsletter!

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store