What is a Typescript Tuple?
Typescript has changed the way developers code for the web. It has made the lives of web developers easier by introducing static typing to JavaScript, and a plethora of features that are either not available in JavaScript or has yet to be included in a future ECMAScript specifications. One of these cool features is the Tuple data type.
What is a tuple?
According to the Typescript documentation: “Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same.” In simple terms, a tuple enables the storing of multiple data of different types in a collection. You can define which type of data can be stored in each every position.
In the example below I declare a tuple to hold string and number data types
let employee: [string, number] //Declaring tupleAfter declaring a tuple, to assign values to it you must pass the correct data type.
employee= ['David', 10] If you were to pass an incorrect data type to the tuple, such as the example below where I’m passing a boolean to the string, the typescript compiler will throw an error .
employee = [true, 10]; //Error: ‘Type ‘true’ is not assignable to type ‘string’’Manipulating tuples
As stated above in the typescript definition, A tuple is an array, which means you will have access to all the methods of an array in your possession, such as; push, pop, find, indexOf, filter, splice, forEach and much more.
Caution: Although tuples can be seen as pairs, the values are not stored as pairs per index but instead each value will have it’s own index. In the below code, to access the value ‘David’ and number ‘10’, I stored in the tuple earlier, I will access each value just like how I would with a regular array by their index.
console.log(employee[0]); //David
console.log(employee[1]); //10Another unique thing about tuples to remember, is when assigning values to a tuple, the first few values must match exactly the types defined. Any values after that can be inserted in any order.
For example, after declaring employee to be of type [string, number], the first two values I pass must be in the order of string then number. Any values passed after that can be in any order, and it can be of any of the predefined tuple types declared.
let employee: [string, number]; //declaration
employee = ['David', 10]; //Valid
employee.push(77);
employee.push('Eva');The following would return an error
employee.push(true); //Error: Argument of type 'true' is not //assignable to parameter of type 'string | number'.
How is a tuple different from an array?
Now you must be wondering, if a tuple works like an array and has all the methods of an array, why can’t I just use an array of type ‘any’ to accomplish the above examples?
The answer to this, is yes you can, but then this will allow certain values that you might not want inserted into your array. For example if I was to do the above examples with an array of type ‘any’, I would be able to pass in any values other than string and number to the array.
employee: Array<any>;
employee.push('David'); //valid
employee.push(23); //valid
employee.push(true); // also valid
The benefit of a tuple is it allows you to hold multiple data types in your array while also setting constraints.
Use Cases
I found the use of tuples to be very useful in the following:
- Dictionary/record key value pair
- When you want a method to return more than a single value, and do not want to use an object.
Add in the comment section, areas where you found using tuples was a better option.
If you enjoyed this article make sure to hit the clap button and checkout my other articles below!
