We are going to cover real-world use cases and applications for named tuples in TypeScript. TypeScript tuples help to ensure a robust, well-documented, and maintainable codebase. TypeScript tuples are best used in scenarios in which you know exactly how many types you want to allow in an array.
TypeScript tuples are best used in scenarios in which you know exactly how many types you want to allow in an array.
Tuples extend the capabilities of the array data type. With tuples, we can easily construct special kinds of arrays, where elements are of fixed types with respect to an index or position. Due to the nature of TypeScript, these element types are known at the point of initialization. In essence, with tuples, we can define the type of data that can be stored in every position in an array.
Tuples are more like advanced arrays with extra features that ensure type safety, particularly in situations where we need to account for a list containing a fixed number of elements with multiple known types.
The major difference between arrays and tuples is that when we assign values to a tuple, these values must match the types defined in the tuple declaration in the same order. On the other hand, arrays can support multiple types with the
any type or the bitwise OR (
|) operator, but the order or structure of the elements doesn’t come into play.
In this tutorial, we are going to cover real-world use cases and applications for named tuples in TypeScript. We will get to know the importance of this data type and why it is preferred in certain cases.
At the end of the day, we will get to see firsthand how this data type contributes to the improvement of the TypeScript language in terms of allowing stricter rules as per improved documentation, maintainable code and developer productivity.
Before we get started, readers should be familiar with the basics of TypeScript and types in general. To learn more about this topic, check this section of TypeScript’s documentation. Now let’s get started.
Before we begin our journey into exploring use cases for tuples in TypeScript, let’s briefly explore some simple cases where arrays can be used and how tuples can fit in perfectly well — and even better — in the same scenario.
In TS, we can declare an array of a particular data type. For example, we can declare an array of numbers by specifying the type of that element followed by square brackets:
. Let’s see how to do so:
let arr: number; arr = [1, 2, 3];
As we can see from the example above, in order to ensure type safety (which allows for easier annotation and documentation of our code), we need to make use of arrays, which allow for cases like this where we have lists of a particular data type. This, in fact, is the essence of a typed language like TypeScript.
For arrays with multiple data types, we can make use of the
any type or the
| (bitwise OR) operator. However, in this case, the order of the data is not set in stone. Let’s see an example below:
let arr: (string | number); arr = ['Alex', 2020]; console.log(arr);
From the example above, we can decide to pass the number before the string, and it still works. The order in which we pass the data when the array is instantiated does not matter in this case, insofar as we have a combination of the types specified. This is exactly what tuples aim to solve.
With tuples, we can have a list of multiple data types whereby the order in which we pass the data type must conform to the order when the tuple was declared. In essence, the structure of the tuple needs to stay the same. Let’s see an example to better understand this concept:
let tup: [string, number]; tup = ['Alex', 19087]
In the example above, we can see that we have declared a tuple with two basic data types: string and number. Note that when we call the
tup variable, we must also pass the element types in the order they are declared. Essentially, we can’t have a number at
index 0 and a string at
index 1, like so:
tup = [19087, 'Alex]
If we had done so, we would get the error shown below:
TSError: ⨯ Unable to compile TypeScript: index.ts:6:8 - error TS2322: Type 'number' is not assignable to type 'string'. 6 tup = [19087, 'Alex'] ~~~~~ index.ts:6:15 - error TS2322: Type 'string' is not assignable to type 'number'. 6 tup = [19087, 'Alex']
As we can see from the earlier examples above, we are declaring a number array and initializing it with values. This works as long as we are dealing only with element types that are numbers.
To account for arrays with multiple data types, we can make use of the
any type or
| operator, although in this case, the order or structure of the data is not guaranteed, which might not be what we want.
With tuples, however, we can ensure strictness with respect to the data types and the order of the data we intend to pass. Tuples allow for specifying known type boundaries around element types with a fixed number of elements.
Since tuples allow us to define both fixed types and order in an array, they are best when working with data that are related to each other in a sequential way (where order is important). That way, we can easily access the elements in a predetermined manner, making our desired responses predictable in behavior.
Below, we will be exploring some more use cases of tuple types in TS based on the 3.0 release, which will generally revolve around extracting and spreading parameter lists in function signatures.
With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...
You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...