TypeScript 4.0: What I’m Most Excited About
By: Fernando Doglio
Tags: Frontend Development, Typescript, Backend Development, JavaScript, Programming

The tooltip will show all three overloads, and thanks to the labels, they will make a lot more sense than something that says param_0: string, param_1: number .

A few considerations about labeled tuples:

If you use labels for one item in the tuple, you have to use them for all elements. You can also define optional elements in the tuple, by taking advantage of the label by adding a ? at the end of it:

type Person = [name: string, address?: string]

Variadic Tuple Types

This one has a very interesting name, doesn’t it? It took me a while to understand it, but let’s go step by step.

We’ve already covered the concept of tuples, but just to be sure, a tuple is essentially a list with a pre-set length and where the type of every element is known. So the following are valid tuples:

type PersonParams = [name: string, age: number] let me:PersonParams = ['Fernando Doglio', 36]

Tuples, as we’ve seen above, now can have named elements as well, but the point about them, is that they have this pre-set structure, which we can use to define the rest parameter of a function (again, already somewhat covered above, but let me elaborate):

Notice how the rest parameter always needs to be the last one. We’re limited by that, because of how JavaScript has defined this property. However, variadic tuples allow for a more flexible definition by letting us put the rest parameter wherever we want.

In fact, with variadic tuples, we can also define generic types, which essentially let us create semi-defined tuples, where we can leave room for flexibility, let me explain:

So, as you can see, with variadic tuples, we can define a basic structure for our types and then extend them in order to add whatever extra we need into it.

That’s cool and all, but what can we actually do with this? Well if you apply this flexibility to function property definition, you can define patterns. For example, having a callback as the last parameter, is a very common pattern in Node.js with asynchronous functions. You can define something like that with variadic tuples in TypeScript:

As you can see, I actually defined two tuples here at the top of the code, one for callback functions, since there is also a very well known pattern where the first argument is the error and the second (and potentially others) contain the data of the “happy path” (where there are no errors). The second tuple makes use of the pattern and creates a new one where the callback function is the last element in an undetermined list of parameters.

Finally we’re using these tuple definitions to define our own functions, and you can see how easy it is to use these generic templates of functions to define our own custom ones, that follow the same pattern.

So, in the end, variadic tuples are here to simpify the way we can define a generic tuple, which we can then use anywhere (including on function definitions) to create specific versions of it following the same pattern.

Some Editor Improvements

Other than the above changes (and other minor ones I’m not mentioning here), version 4.0 brought some editor-specific changes to the table, such as:

Convert to Optional Chaining

In case you don’t know what optional chaining is, is a new feature from JavaScript, which allows you to write chain your property access code (or your chained method calls) in a way that if one of them doesn’t exists (or returns null or undefined, thus cutting the chain short) the code won’t throw a nasty exception (you can read more about it here).

Before this feature, you would have to make sure every step prior to the final link on the chain existed before actually accessing it, something like:

obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d()

Now, you can select that code and click on “Convert to Optional Chain expression” and the editor will refactor that code for you.