What’s New in TypeScript 4.0? Fancier Tuples
If you’ve been doing any web development in the past few years, chances are you’ve heard a lot about TypeScript — Microsoft’s massively popular open-source programming language that adds static typing, convenient code editor integrations, and other features designed to streamline the development experience while remaining backwards-compatible by compiling into pure vanilla JS.
This week, a new major version of TS was released — 4.0 — containing a number of new features. I’ll give a quick rundown on a couple of quality-of-life improvements they’ve made involving type definitions for Tuple data structures.
Tuples in TS allow you to define really specific arrays. They have a fixed number of elements, and you already know what type each of these elements will be. The types of Tuple elements don’t need to match (as in [ string, number ] ) the way an array might (as in string[] or Array<number>.)
Tuples in TS 4.0 are functionally the same as they’ve always been, and the new changes won’t break any of your existing code that used them. The new changes have simply emphasized the usefulness of tuples in typescript, and increased their clarity and utility.
One critical place where being a little more strict and explicit about what your program’s arrays look like and contain is when defining parameters in your function definitions, and the new changes make the most sense when described in this context.
Labels
The first nice-to-have change in TS tuples (or TSuples, as I am now calling them,) is element labeling! A purely documentation and tooling oriented change, this feature will improve code readabiility significantly.
Tuples are still defined the same as always, only now you can optionally provide labels to elements in a way that mirrors how argument lists types work. userDetail: [ string, number, boolean ] can optionally become userDetail: [ name: string, age: number, optIn: boolean ]
Having labels pop up in your editor when manipulating these variables will really help when you’re going back to some component after a long break and can’t remember what the heck your vary specific and well-defined variable was even for.
Variadicity
A big quality of life improvement in TS4 is Variadic Tuples!
Using a spread operator in the parameters of a function definition or in a TS tuple type definition creates what is known as a Rest Parameter. These are values representing an unknown number of elements as an array. In a function definintion, you might take in an undefined number of values as arguments, and perform some mathematical operation on all of them, however many there are. In a tuple, you might spread in an element that is some array of variable length coming from the output of another function.
In TS, having rest parameters in a tuple was fine, it just had to be the last value in a tuple. Now, any value in a tuple can be a rest parameter, which allows for much more freedom in your type definitions
The last, and coolest, change in the fancy new variadic tuples is that spreads can now be generic. This provides a huge amount of freedom in terms of defining function parameters with tuples — elements can be spread from values containing zero or more values of an unknown type, while maintaining strict control of the values that the function accepts and rejects relative to this.
This cleans up many common design patterns in TS signatures and interfaces (e.g. obnoxious repetitive edge-case overload signature definitions), and will allow for many new and powerful structures to emerge — the new tuples and resulting function parameters are less arbitrarily strict, but still just as precise and useful. This will make modern TS become even more dynamic.
Hopefully this was a helpful intro to some of TS4’s features!
