Tuples

Tuples have had a few enhancements in TypeScript 3, so that they can be used with the popular rest and spread JavaScript syntax. Before we get into the specific enhancements, we'll go through what tuples are, along with what the rest and spread syntax is. A tuple is like an array but the number of elements are fixed. It's a simple way to structure data and use some type safety.

Let's have a play with tuples:

1. In the TypeScript playground, let's enter the following example of a tuple variable: 

let product: [string, number];

We've initialized a product variable to a tuple type with two elements. The first element is a string and the second a number.

1. We can store a product name and its unit price in the product variable on the next line, as follows:

product = ["Table", 500];

1. Let's try to store the product name and unit price the other way around:

product = [500, "Table"];

Not surprisingly, we get a compilation error. If we hover over 500, the compiler quite rightly complains that it was expecting a string. If we hover over "Table", the compiler complains that it expects a number: 

So, we do get type safety, but tuples tell us nothing about what should be in the elements. So, they are nice for small structures or structures where the elements are obvious. 

1. The following examples are arguably fairly readable:

let flag: [string, boolean];
flag = ["Active", false]

let last3Scores: [string, number, number, number]
last3Scores = ["Billy", 60, 70, 75];

let point: [number, number, number];
point = [100, 200, 100];

1. However, the following example is not so readable:

let customer: [string, number, number];
customer = ["Tables Ltd", 500100, 10500];

 What exactly do those last two numbers represent?

1. We can access items in a tuple in the same way as an array, by using the element's index. So, let's access the product name and unit price in our product variable in the TypeScript playground:

let product: [string, number];
product = ["Table", 500];
console.log(product[0]);
console.log(product[1]);

   If we run the program, we'll get "Table" and 500 output to the console.

1. We can iterate through elements in a tuple like we can an array, using a for loop or the array forEach function:

let product: [string, number];
product = ["Table", 500];

for (let element in product) {
 console.log(product[element]); 
}

product.forEach(function(element) {
 console.log(element); 
});

Running the program, will output Table and 500 to the console twice. Notice that we don't need to add a type annotation to the element variable because the TypeScript compiler cleverly infers this.

So, that's the tuple type, but's what's new in TypeScript 3? The enhancements have been largely driven by the popularity of JavaScript's rest and spread syntax, so let's briefly cover this in the next section.