2.1 Массивы
TypeScript расширяет возможности JavaScript-массивов, предоставляя строгую типизацию и улучшенные возможности для работы с данными. В этой лекции мы рассмотрим синтаксис и использование массивов и кортежей в TypeScript, а также обсудим их особенности и преимущества.
Массивы — это коллекции однотипных данных, которые могут изменяться по размеру и содержанию. В TypeScript массивы могут быть типизированы, что позволяет контролировать типы элементов, хранящихся в массиве.
1. Объявление и инициализация массивов
Массивы можно объявлять двумя способами.
let name: type[];
let name: Array<type>;
С использованием типа элемента и квадратных скобок:
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ['one', 'two', 'three'];
С использованием дженериков:
let numbers: Array<number> = [1, 2, 3, 4, 5];
let strings: Array<string> = ['one', 'two', 'three'];
Оба способа эквивалентны и позволяют точно указать тип элементов массива.
2. Основные операции с массивами
Массивы в TypeScript поддерживают множество операций, таких как добавление, удаление элементов, поиск, фильтрация и итерация.
Пример операций с массивами:
"use strict";
let numbers = [1, 2, 3, 4, 5];
// Добавление элементов
numbers.push(6); // [1, 2, 3, 4, 5, 6]
numbers.unshift(0); // [0, 1, 2, 3, 4, 5, 6]
// Удаление элементов
numbers.pop(); // [0, 1, 2, 3, 4, 5]
numbers.shift(); // [1, 2, 3, 4, 5]
// Поиск элементов
let index = numbers.indexOf(3); // 2
// Фильтрация
let evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]
// Итерация
numbers.forEach(num => console.log(num)); // 1 2 3 4 5
let numbers: number[] = [1, 2, 3, 4, 5];
// Добавление элементов
numbers.push(6); // [1, 2, 3, 4, 5, 6]
numbers.unshift(0); // [0, 1, 2, 3, 4, 5, 6]
// Удаление элементов
numbers.pop(); // [0, 1, 2, 3, 4, 5]
numbers.shift(); // [1, 2, 3, 4, 5]
// Поиск элементов
let index: number = numbers.indexOf(3); // 2
// Фильтрация
let evenNumbers: number[] = numbers.filter(num => num % 2 === 0); // [2, 4]
// Итерация
numbers.forEach(num => console.log(num)); // 1 2 3 4 5
3. Многомерные массивы
TypeScript также поддерживает многомерные массивы, которые представляют собой массивы массивов.
Пример многомерного массива:
"use strict";
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1
console.log(matrix[2][2]); // 9
let matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1
console.log(matrix[2][2]); // 9
2.2 Кортежи
Массивы могут менять свой размер и содержать любое количество значений. Поэтому пустой массив как значение [] является валидным для массивов любого типа.
При этом иногда массивы выступают в качестве упрощенной версии объекта, где количество значений и их порядок строго определены. Например, с помощью такого массива можно представить точку на плоскости: [x, y].
Такие массивы нужны для экономии символов, когда приходится создавать много одинаковых данных, например, для тестирования. В TypeScript подобные массивы называются кортежами.
Кортежи (tuples) в TypeScript — это особый вид массивов, которые позволяют хранить фиксированное количество элементов различных типов. Кортежи полезны, когда необходимо объединить несколько значений разного типа в одну структуру данных.
1. Объявление и инициализация кортежей
Для объявления кортежей используется синтаксис, аналогичный массивам, но с указанием типов всех элементов.
let name: [тип1, тип2, …];
Пример объявления кортежа:
let person: [string, number] = ['John', 30];
В этом примере кортеж person содержит строку и число.
2. Доступ к элементам кортежа
К элементам кортежа можно обращаться по индексу, как и к элементам массива.
Пример доступа к элементам кортежа:
let person = ['John', 30];
let name = person[0];
let age = person[1];
console.log(`Name: ${name}, Age: ${age}`); // Name: John, Age: 30
let person: [string, number] = ['John', 30];
let name: string = person[0];
let age: number = person[1];
console.log(`Name: ${name}, Age: ${age}`); // Name: John, Age: 30
3. Операции с кортежами
Изменять количество объектов кортежа нельзя. Если мы определили, что их должно быть два, то их всегда должно оставаться 2.
Но(!) ради совместимости со старыми библиотеками, где часто массивы исполняли роль кортежей, разработчики TypeScript все же разрешают использовать методы push() и pop(). Хотя общая рекомендация состоит в том, чтобы не пытаться изменять размер кортежа.
Пример операций с кортежами:
"use strict";
let tuple = ['hello', 42];
// Добавление элементов
tuple.push('world'); // ['hello', 42, 'world']
tuple.push(100); // ['hello', 42, 'world', 100]
// Удаление элементов
tuple.pop(); // ['hello', 42, 'world']
// Доступ по индексу
console.log(tuple[0]); // 'hello'
console.log(tuple[1]); // 42
console.log(tuple[2]); // 'world'
let tuple: (string | number)[] = ['hello', 42];
// Добавление элементов
tuple.push('world'); // ['hello', 42, 'world']
tuple.push(100); // ['hello', 42, 'world', 100]
// Удаление элементов
tuple.pop(); // ['hello', 42, 'world']
// Доступ по индексу
console.log(tuple[0]); // 'hello'
console.log(tuple[1]); // 42
console.log(tuple[2]); // 'world'
4. Использование кортежей для возврата нескольких значений
Кортежи часто используются для возврата нескольких значений из функции.
Пример функции с кортежем в качестве возвращаемого значения:
"use strict";
function getUserInfo() {
let name = 'Alice';
let age = 25;
return [name, age];
}
let userInfo = getUserInfo();
console.log(`Name: ${userInfo[0]}, Age: ${userInfo[1]}`); // Name: Alice, Age: 25
function getUserInfo(): [string, number] {
let name: string = 'Alice';
let age: number = 25;
return [name, age];
}
let userInfo: [string, number] = getUserInfo();
console.log(`Name: ${userInfo[0]}, Age: ${userInfo[1]}`); // Name: Alice, Age: 25
2.3 Разница между массивами и кортежами
Основное различие между массивами и кортежами заключается в их гибкости и строгости:
- Массивы: используются для хранения коллекций однотипных данных, могут изменяться по размеру и содержанию
- Кортежи: используются для хранения фиксированного набора элементов различных типов. Типы и порядок элементов кортежа строго фиксированы
Примеры использования массивов и кортежей в реальных проектах
Пример использования массива для хранения списка задач:
"use strict";
let tasks = [
{ id: 1, title: 'Learn TypeScript', completed: false },
{ id: 2, title: 'Write a blog post', completed: true }
];
tasks.push({ id: 3, title: 'Build a project', completed: false });
tasks.forEach(task => {
console.log(`${task.title} - ${task.completed ? 'Completed' : 'Not Completed'}`);
});
interface Task {
id: number;
title: string;
completed: boolean;
}
let tasks: Task[] = [
{ id: 1, title: 'Learn TypeScript', completed: false },
{ id: 2, title: 'Write a blog post', completed: true }
];
tasks.push({ id: 3, title: 'Build a project', completed: false });
tasks.forEach(task => {
console.log(`${task.title} - ${task.completed ? 'Completed' : 'Not Completed'}`);
});
Пример использования кортежа для работы с данными из API:
"use strict";
function fetchUserData() {
let userId = 123;
let userName = 'John Doe';
let isActive = true;
return [userId, userName, isActive];
}
let userData = fetchUserData();
console.log(`User ID: ${userData[0]}, Name: ${userData[1]}, Active: ${userData[2]}`);
type ApiResponse = [number, string, boolean];
function fetchUserData(): ApiResponse {
let userId: number = 123;
let userName: string = 'John Doe';
let isActive: boolean = true;
return [userId, userName, isActive];
}
let userData: ApiResponse = fetchUserData();
console.log(`User ID: ${userData[0]}, Name: ${userData[1]}, Active: ${userData[2]}`);
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ