Recently, Typescript team has released version 4 and now we will briefly look at the features included in this release.
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.
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.
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.
Editor related changes There are also some other changes that improve editor capabilities coming with this release:
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.