Typescript is a superset of Javascript and has received a lot of attention in the last couple of years. Bringing static type system to the Javascript world is an amazing undertaking even though it is actually a different language. Not only does Typescript make lives of developers better, it also makes big and complex projects easier to maintain and work on. Additionally, a lot of problems are now resolved even before they hit production just because Typescript can warn us with its editor integration (or via its compiler). Apart from the dedicated core team at Microsoft, it has a great growing community, and it is getting new features as it improves.

Recently, Typescript team has released version 4 and now we will briefly look at the features included in this release.

Notable New Features

Labeled Tuple Elements As you know, Typescript allows us to define tuple types so we can have type-safe and predefined length arrays as types. Typescript 4.0 improves this a bit further and now we can define labeled tuple elements, hence, everything is even more clear and readable.

In the above example, we are expecting 2 arguments for the function. However, it is not clear what for those ‘strings’ are. And for someone who consumes this function, it might be confusing. So, with labeled tupple elements we can do the following:

Notice the difference – it is much better and readable now, isn’t it? Of course, when you use this syntax, you have to name all tuple elements, so the code below will raise errors:

Another thing to note is that tuple names are used only for documentation and tooling purposes, so you can destructure them with different variable names.

Variadic Tuple Types

In the previous versions of Typescript, it was cumbersome to define types for some specific functions that take arrays or tuples as arguments. For example, if you want to define a function that takes two arrays and returns a concatenated array, you will probably have something like this for typings:

This way of typing unfortunately does not solve the issue for all cases because it covers typings only for the number of overloads you can write. Typescript 4.0 overcomes this problem with 2 new improvements. First, spreads in tuple types can be generic so it is now possible to define advanced operations on tuples even though we do not know the type. Second, rest elements can now be stated anywhere in the tuple, they do not have to be in the end. See the examples below:

Class Property Inference from the Constructors Directly from the documentation, ‘TypeScript 4.0 can now use control flow analysis to determine the types of properties in classes when noImplicitAny is enabled.’.

If an assignment to a class property is inside a condition block (like if a property is assigned based on some condition), that property will be considered as potentially undefined.

Short Circuiting Assignment Operators As you know, Javascript supports compound assignment operators – operators that are applied to two arguments and then assign the result to the left side. You are probably very familiar with the syntax below:

There are a lot of similar examples like the one at the top but this kind of operations would not be possible for logical and (&&), logical or (||), and nullish coalescing (??) operators previously. Now, Typescript supports this using assignment operator in combination with these three operators

unknown on catch Clause This new feature in Typescript allows you to type catch parameters as unknown. This way inside the catch block you will have a clue that you need to do type checking before doing some operations. Previously, catch parameters could only be any type.

Custom JSX Factories Typescript 4.0 allows you to use custom JSX factories with jsxFragmentFactory option. In the jsconfig.json file, you can change this option and have a customized JSX fragment factory to do the transformation. In the example below, h and Fragment are used rather than React.createElement and React.Fragment.

If you want to use a factory per file basis, you can add the new /** @jsxFrag */ pragma comment to the file.

Other Changes

build mode improvements with –noEmitOnError

In the past, it was very slow to compile a program which had errors in the previous compilation if –noEmitOnError flag, with incremental option. Typescript 4.0 now overcomes this problem and increases the performance of –build scenarios. You can check the pull request here

–incremental option with –noEmit

Typescript 4.0 lets you use –noEmit flag, while doing –incremental compiles. For details, see the pull request here.

Breaking Changes

• lib.d.ts declaritions have changed, notably the types for DOM.
• Properties that override accessors give an error (same for the other way around)
• Usage of delete operator in strictNullChecks is restricted to any, unknown, never, or optional types. In other cases, it will give an error. Usage of TypeScript’s Node Factory is deprecated

Editor related changes There are also some other changes that improve editor capabilities coming with this release:

• Convert to optional chaining
• /** @deprecated */ support
• Partial Semantic Mode at startup
• Smarter auto imports

In conclusion, Typescript 4.0 brings some good new features and we have briefly looked at them in this post. Labeled tuple elements, variadic tuple types, class property inference from constructors, short circuiting assignment operators, unknown on catch clause are some important new things as well as with other cool features mentioned above. All these things improve the work of developers and bring even more quality and easy to understand approach to our code. They are making our job easier and more enjoyable. Even if you are new to Typescript, just give it a try and see how fun it is to write code!

References Some of the examples/brief explanations in this post added via official Typescript blog.