TypeScript — Arrays
An array is a special type of data type which can store multiple values of different data types sequentially using a special syntax.
TypeScript supports arrays, similar to JavaScript. There are two ways to declare an array:
1. Using square brackets. This method is similar to how you would declare arrays in JavaScript.
let fruits: string[] = [‘Apple’, ‘Orange’, ‘Banana’];
2. Using a generic array type, Array.
let fruits: Array = [‘Apple’, ‘Orange’, ‘Banana’];
Both methods produce the same output.
Of course, you can always initialize an array like shown below, but you will not get the advantage of TypeScript’s type system.
let arr = [1, 3, ‘Apple’, ‘Orange’, ‘Banana’, true, false];
Arrays can contain elements of any data type, numbers, strings, or even objects.
Arrays can be declared and initialized separately.
let fruits: Arraystring>; fruits = ['Apple', 'Orange', 'Banana']; let ids: Arraynumber>; ids = [23, 34, 100, 124, 44]; An array in TypeScript can contain elements of different data types using a generic array type syntax, as shown below.
let values: (string | number)[] = ['Apple', 2, 'Orange', 3, 4, 'Banana']; // or let values: Arraystring | number> = ['Apple', 2, 'Orange', 3, 4, 'Banana']; Accessing Array Elements:
The array elements can be accessed using the index of an element e.g. ArrayName[index] . The array index starts from zero, so the index of the first element is zero, the index of the second element is one and so on.
let fruits: string[] = ['Apple', 'Orange', 'Banana']; fruits[0]; // returns Apple fruits[1]; // returns Orange fruits[2]; // returns Banana fruits[3]; // returns undefined Use the for loop to access array elements as shown below.
let fruits: string[] = ['Apple', 'Orange', 'Banana']; for(var index in fruits) < console.log(fruits[index]); // output: Apple Orange Banana > for(var i = 0; i < fruits.length; i++) < console.log(fruits[i]); // output: Apple Orange Banana > TypeScript Array Methods
The following table lists all Array methods which can be used for different purposes.
| Method | Description |
|---|---|
| pop() | Removes the last element of the array and return that element |
| push() | Adds new elements to the array and returns the new array length |
| sort() | Sorts all the elements of the array |
| concat() | Joins two arrays and returns the combined result |
| indexOf() | Returns the index of the first match of a value in the array (-1 if not found) |
| copyWithin() | Copies a sequence of elements within the array |
| fill() | Fills the array with a static value from the provided start index to the end index |
| shift() | Removes and returns the first element of the array |
| splice() | Adds or removes elements from the array |
| unshift() | Adds one or more elements to the beginning of the array |
| includes() | Checks whether the array contains a certain element |
| join() | Joins all elements of the array into a string |
| lastIndexOf() | Returns the last index of an element in the array |
| slice() | Extracts a section of the array and returns the new array |
| toString() | Returns a string representation of the array |
| toLocaleString() | Returns a localized string representing the array |
The following example demonstrates some of the array methods.
var fruits: Arraystring> = ['Apple', 'Orange', 'Banana']; fruits.sort(); console.log(fruits); //output: [ 'Apple', 'Banana', 'Orange' ] console.log(fruits.pop()); //output: Orange fruits.push('Papaya'); console.log(fruits); //output: ['Apple', 'Banana', 'Papaya'] fruits = fruits.concat(['Fig', 'Mango']); console.log(fruits); //output: ['Apple', 'Banana', 'Papaya', 'Fig', 'Mango'] console.log(fruits.indexOf('Papaya'));//output: 2 Typescript тип данных array
Массивы определяются с помощью выражения [] и также являются строго типизированными. То есть если изначально массив содержит строки, то в будущем он сможет работать только со строками.
let list: number[] = [10, 20, 30]; let colors: string[] = ["red", "green", "blue"]; console.log(list[0]); console.log(colors[1]);
Как и в JavaScript, с помощью индексов можно обращаться к элементам массива.
Альтернативный способ определения массивов представляет применение типа Array<> , где в фигурных скобках указывается тип элементов массива:
let names: Array = ["Tom", "Bob", "Alice"]; console.log(names[1]); // Bob
Но фактически такие формы массивов, как number[] или string[] являются сокращением соответственно типов Array или Array
В остальном массивы в TypeScript поддерживают все те же операции, что и массивы в JavaScript.
ReadonlyArray
Массивы позволяют изменять значения своих элементов:
const people = ["Tom", "Bob", "Sam"]; people[1] = "Kate"; console.log(people[1]); // Kate
Но TypeScript также позволяет определять массивы, элементы которых нельзя изменять. Для этого применяется тип ReadonlyArray<> , для которого в угловых скобках указывается тип элементов массива.
В отличие от типа Array для типа ReadonlyArray мы не можем принимать конструктор, как в следующем случае:
const people: ReadonlyArray = new ReadonlyArray("Tom", "Bob", "Sam"); Вместо этого необходимо передать значения в виде обычного массива:
const people: ReadonlyArray = ["Tom", "Bob", "Sam"];
Для определения подобных массивов также можно использовать сокращение типа — readonly Тип_данных[] :
const people: readonly string[]= ["Tom", "Bob", "Sam"];
Массив ReadonlyArray поддерживаtт большинство тех же операций, что и обычные массивы, за тем исключением операций, которые изменяют массив и его элементы. Так, мы не можем менять отдельные значения:
const people: ReadonlyArray = ["Tom", "Bob", "Sam"]; people[1] = "Kate"; // ! Ошибка элементы массива ReadonlyArray нельзя изменить
Также мы не можем добавлять новые или удалять уже имеющиеся элементы:
const people: ReadonlyArray = ["Tom", "Bob", "Sam"]; people.push("Kate"); // ! Ошибка - нельзя добавить новые элементы people.pop(); // ! Ошибка - нельзя удалить существующие элементы Более того при компиляции компилятор сообщит нам, что для типа ReadonlyArray не определены методы push() и pop() . Это относится ко всем операциям, которые изменяют массив.
Все остальные операции, которые предусматривают чтение массива, мы по прежнему можем использовать:
function printUsers(users: readonly string[]) < for(const user of users)< console.log(user); >> function usersToString(users: ReadonlyArray): String < return users.join(", "); >const people: readonly string[]= ["Tom", "Bob", "Sam"]; printUsers(people); console.log(usersToString(people)); Декомпозиция массивов
Как и в javascript, массивы поддерживают декомпозицию на константы и переменные. Например:
const people: string[]= ["Tom", "Bob", "Sam"]; const [first, second, third] = people; console.log(first); // Tom console.log(second); // Bob console.log(third); // Sam
Здесь массив people раскладывается на три константы — first, second, third. Значения массива передаются константам/переменным по позиции, то есть первой константе — первый элемент массива, второй константе — второй элемент и так далее. Причем констант/переменных не больше, чем элементов массива.
С помощью оператора . можно указать массив, в который будут помещаться все оставшиеся элементы раскладываемого массива, которые не вошли в предыдущие переменные/константы:
const people: string[]= ["Tom", "Bob", "Sam"]; const [first, . rest] = people; console.log(first); // Tom console.log(rest[0]); // Bob console.log(rest[1]); // Sam
Здесь константа first принимает первый элемент массива — «Tom». Все оставшиеся элементы кортежа будут помещаться в массив rest .
Также можно оставить пустое место вместо переменной/константы, если мы хотим пропустить соответствующий элемент массива:
const people: string[]= ["Tom", "Bob", "Sam", "Kate"]; const [, second, , forth] = people; // пропускаем первый и третий элементы массива console.log(second); // Bob console.log(forth); // Kate