Table of contents
Introduction
A Tuple Type in TypeScript is a special type of array. Tuples allow the expression of an array that has a fixed number of elements as well as specified types for each element. So there are 2 important features of tuples that you should be mindful of.
- The number of elements a tuple is expected to have is fixed.
- Each of the element is expected to be of a specified type.
How to assign Tuple Types
To assign a tuple type to a variable, we use the square bracket [] syntax. Let's see an example below.
// TypeScript
let fixedArray: [string, number, number] = ["hello", 2, 3]
The fixedArray variable is an example of a tuple. It is an array that is supposed to have 3 elements. Not only that, the type of the three elements should correspond to the order of the specified types. In other words, the element at index 0 should be a string, the element at index 1 should be a number, and the element at index 2 should also be a number.
For fixedArray, the order of the specified types is a string, followed by a number and another number. Thus, the elements in the array conforms to this definition. We have hello, which is a string, 2, a number, and 3, another number.
Whenever the type of the elements fails to conform to the order of the types as defined, TypeScript will throw an error to prompt you.
// TypeScript
let fixedArray: [string, number, number] = ["hello", "2", 3]
// Error: Type 'string' is not assignable to type 'number'.
When the second element in the array changed from the number 2 to a string "2", TypeScript throws an error. This happens because TypeScript expects the order of types to match [string, number, number] but now it is [string, string, number].
Also, if the number of elements in the array is less or more than the number of types stated, TypeScript will throw an error. Check the examples below and read the error to understand better.
// TypeScript
let fixedArray: [string, number, number] = ["hello", 2]
// Error: Type '[string, number]' is not assignable to type '[string, number, number]'.
// Source has 2 element(s) but target requires 3.
// TypeScript
let fixedArray: [string, number, number] = ["hello", 2, 3, "four"]
// Type '[string, number, number, string]' is not assignable to type '[string, number, number]'.
// Source has 4 element(s) but target allows only 3.
Conclusion
The main takeaway from this lesson is that when working with tuples, the length of the array and the order of the types should match the provided definition.
Unlike regular arrays, TypeScript will throw an error when there is a mismatch either with the number of elements or the order of the types.
Now, you know how to work with tuples in TypeScript.
Thanks for reading.