Add updating and destructuring examples. (#27628)
parent
05a49e36ee
commit
0ddbda2c78
|
@ -4,7 +4,7 @@ title: Tuple Type
|
||||||
|
|
||||||
# Tuple Type
|
# Tuple Type
|
||||||
|
|
||||||
Express an array in which a fixed number of elements of types is known, but not the same.
|
Expresses an array with a fixed number of elements of known (but possibly different) types. For example:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
let arr: [string, number];
|
let arr: [string, number];
|
||||||
|
@ -19,48 +19,69 @@ arr = [7, 'Hello'];
|
||||||
When accessing an element outside the known indices, it will use a union type:
|
When accessing an element outside the known indices, it will use a union type:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
arr[3] = 'World!'
|
arr[3] = 'World!';
|
||||||
// OK, 'string' can be assigned to 'string | number'
|
// OK, 'string' can be assigned to 'string | number'
|
||||||
|
|
||||||
// Error, 'boolean' is not a 'string | number'
|
|
||||||
arr[5] = false;
|
arr[5] = false;
|
||||||
// Error, 'boolean' is not a 'string | number'
|
// Error, 'boolean' is not a 'string | number'
|
||||||
```
|
```
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
In Typescript's type you can have some buit-in properties. Forexample length or some other unique each types.
|
Tuples have some built-in properties, such as length.
|
||||||
|
|
||||||
### length
|
### length
|
||||||
This property said, how many element has it's element.
|
The number of elements:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
let tuple = []; //you can initialize it after the declaration too, not just the method above
|
let tuple = [10, 'Mike'];
|
||||||
tuple[0] = 10;
|
|
||||||
tuple[1] = 'Mike';
|
|
||||||
let number = tuple.length;
|
let number = tuple.length;
|
||||||
//number = 2;
|
// number = 2
|
||||||
```
|
```
|
||||||
|
|
||||||
## Built-in methods
|
## Built-in methods
|
||||||
In Typescript's type you can use some built-in functions. Each type has common and unique methods.
|
Tuples have some built-in functions, such as adding a new element and removing an element:
|
||||||
Below you can read about the most used ones of the tuple type's methods.
|
|
||||||
|
|
||||||
### pop()
|
### pop()
|
||||||
Removes the last element from a tuple.
|
Removes the last element from a tuple and returns that element.
|
||||||
```typescript
|
```typescript
|
||||||
var tuple = [10,'Emma',11,'Lily',12,'Mike Ross'];
|
let tuple = [10,'Emma',11,'Lily',12,'Mike Ross'];
|
||||||
tuple.pop();
|
let popped = tuple.pop();
|
||||||
//tuple = [10,'Emma',11,'Lily',12,]
|
// tuple = [10,'Emma',11,'Lily', 12]
|
||||||
//We popped 'Mike Ross' from the tuple
|
// popped = 'Mike Ross'
|
||||||
```
|
```
|
||||||
|
|
||||||
### push()
|
### push()
|
||||||
Adds element to the end of the tuple.
|
Adds an element to the end of the tuple.
|
||||||
```typescript
|
```typescript
|
||||||
var tuple = [10,'Emma',11,'Lily',12,'Mike Ross'];
|
let tuple = [10,'Emma',11,'Lily',12,'Mike Ross'];
|
||||||
tuple.push('Rachel Zane');
|
tuple.push('Rachel Zane');
|
||||||
// tuple = [10,'Emma',11,'Lily',12,'Mike Ross','Rachel Zane']
|
// tuple = [10,'Emma',11,'Lily',12,'Mike Ross','Rachel Zane']
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Destructuring
|
||||||
|
The following is an easy way to break apart a tuple in TypeScript:
|
||||||
|
```typescript
|
||||||
|
let tuple = ['sheep', 4];
|
||||||
|
[a, b] = tuple;
|
||||||
|
// a = 'sheep'
|
||||||
|
// b = 4
|
||||||
|
```
|
||||||
|
|
||||||
|
## Updating
|
||||||
|
You can initialize the tuple after the declaration:
|
||||||
|
```typescript
|
||||||
|
let tuple = [];
|
||||||
|
tuple[0] = 'cow';
|
||||||
|
tuple[1] = 'Mike';
|
||||||
|
// tuple = ['cow', 'Mike']
|
||||||
|
```
|
||||||
|
|
||||||
|
You can update an existing tuple in the same way you update an array:
|
||||||
|
```typescript
|
||||||
|
let tuple = ['sheep', 4];
|
||||||
|
tuple[0] = 'cow';
|
||||||
|
// tuple = ['cow', 4]
|
||||||
|
```
|
||||||
|
|
||||||
[More info about tuples on TutorialsPoint](https://www.tutorialspoint.com/typescript/typescript_tuples.htm)
|
[More info about tuples on TutorialsPoint](https://www.tutorialspoint.com/typescript/typescript_tuples.htm)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue