TypeScript - Tuples
TypeScript introduced a new data type called Tuple. Tuple can contain two values of different data types.
Consider the following example of number, string and tuple type variables.
var empId: number = 1; var empName: string = "Steve"; // Tuple type variable var employee: [number, string] = [1, "Steve"];
In the above example, we have defined a variable
empId as number type and
empName as string type with values.
Here, we declared and assigned two variables to id and name of an employee. The same thing can be achieved by using a single tuple type variable.
employee is the tuple type variable with two values of number and string type. Thus, removing the need to declare two different variables.
A tuple type variable can include multiple data types as shown below.
var employee: [number, string] = [1, "Steve"]; var person: [number, string, boolean] = [1, "Steve", true]; var user: [number, string, boolean, number, string];// declare tuple variable user = [1, "Steve", true, 20, "Admin"];// initialize tuple variable
You can declare an array of tuple also.
var employee: [number, string]; employee = [[1, "Steve"], [2, "Bill"], [3, "Jeff"]];
var employee: [number, string] = [1, 'Steve'] will be compiled as
Accessing Tuple Elements
We can access tuple elements using index, the same way as an array. An index starts from zero.
var employee: [number, string] = [1, "Steve"]; employee; // returns 1 employee; // returns "Steve"
Add Elements into Tuple
You can add new elements to a tuple using the push() method.
var employee: [number, string] = [1, "Steve"]; employee.push(2, "Bill"); console.log(employee); //Output: [1, 'Steve', 2, 'Bill']
This is allowed because we are adding number and string values to the tuple and they are valid for the
Now, let's try to add a boolean value to the tuple.
The above example will throw the following error:
test.ts(4,15): error TS2345: Argument of type 'true' is not assignable to parameter of type 'number | string'.
We get an error saying that adding a boolean value to a tuple of type 'number | string' is not permitted. Hence, a tuple declared as 'number | string' can store only number and string values.
The tuple is like an array. So, we can use array methods on tuple such as pop(), concat() etc.
var employee: [number, string] = [1, "Steve"]; // retrieving value by index and performing an operation employee = employee.concat(" Jobs"); console.log(employee); //Output: [1, 'Steve Jobs']