- Learn React with TypeScript 3
- Carl Rippon
- 484字
- 2021-06-10 19:16:41
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:
- 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.
- We can store a product name and its unit price in the product variable on the next line, as follows:
product = ["Table", 500];
- 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.
- 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];
- 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?
- 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.
- 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.
- Python數據分析入門與實戰
- Java面向對象思想與程序設計
- Android 應用案例開發大全(第3版)
- Windows Forensics Cookbook
- Terraform:多云、混合云環境下實現基礎設施即代碼(第2版)
- HTML5+CSS3 Web前端開發技術(第2版)
- Android驅動開發權威指南
- Developing SSRS Reports for Dynamics AX
- FPGA嵌入式項目開發實戰
- 深入理解BootLoader
- C指針原理揭秘:基于底層實現機制
- Mastering Concurrency Programming with Java 9(Second Edition)
- Web程序設計:ASP.NET(第2版)
- UX Design for Mobile
- Less Web Development Cookbook