Optional tuple elements

The final tuple enhancement in TypeScript 3 is the ability to have optional elements. Optional elements are specified using a ? at the end of the element type.

Let's look at another example using our scores theme:

  1. Let's create a type for between one and three scores:
   type Scores = [number, number?, number?];
  1. So, we should be able to create variables to hold between one and three scores:
const samScores: Scores = [55];
const bobScores: Scores = [95, 75];
const jayneScores: Scores = [65, 50, 70];

  As expected, this compiles just fine.

  1. What about four elements? Let's give this a go:
 const sarahScores: Scores = [95, 50, 75, 75];

   We get a compilation error, as we would expect:

  1. If we try no elements, we again get a compilation error:
  const benScores: Scores = [];

When defining optional elements in a tuple, they are restricted to the end of the tuple. Let's try to define a required element after an optional element:

 type ProblematicScores = [number?, number?, number];

 We get a compilation error, as expected:

Optional elements also work in a function rest parameter. Let's try this:

  1. Let's use our scores type in our logScores function we worked with in earlier sections:
type Scores = [number, number?, number?];

function logScores(...scores: Scores) {
console.log(scores);
}
  1. If we try to pass in two scores, the code will compile just fine, because the last parameter is optional: 
logScores(45, 80);
  1. As expected, if we pass in four scores, we receive Expected 1-3 arguments, but got 4:
logScores(45, 70, 80, 65);

When we have optional parameters, it is likely our function's implementation will need to know which arguments have been passed. We can use the tuple's length property to do this:

  1. Let's create an enhanced version of our scores logger, called logScoresEnhanced, which thanks us if we log all 3 scores:
type Scores = [number, number?, number?];

function logScoresEnhanced(...scores: Scores) {
if (scores.length === 3) {
console.log(scores, "Thank you for logging all 3 scores");
} else {
console.log(scores);
}
}
  1. Now, let's call this function with various parameters:
logScoresEnhanced(60, 70, 75); 
logScoresEnhanced(45, 80);
logScoresEnhanced(95);

If we run the program, we only get thanked after the first call when we pass all three scores.

All the enhancements to tuples in TypeScript 3 allow us to use the rest and spread syntax in a strongly-typed fashion. We'll make use of this feature later in the book, when we work with React components.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.96.146