логотип PurpleSchool
Иконка входа
Вход
  • Обучение
  • Войти
логотип PurpleSchool

Кортежи в TypeScript

Автор

Дмитрий Нечаев

Кортежи (tuples) в TypeScript представляют собой особый вид массивов, где порядок элементов фиксирован, и каждый элемент имеет заранее определенный тип. Это позволяет точно описывать структуры данных с известным количеством и типами элементов. Кортежи полезны, когда требуется работать с набором значений различных типов, которые логически связаны друг с другом.

Объявление кортежей

Чтобы объявить кортеж, используется синтаксис массивов с указанием типов элементов в квадратных скобках.

Пример объявления кортежа

let person: [string, number];
person = ["Alice", 25]; // корректное присваивание
// person = [25, "Alice"]; // ошибка: типы не совпадают

В данном примере кортеж person состоит из двух элементов: строки и числа. При попытке присвоить значения в неправильном порядке компилятор выдаст ошибку.

Доступ к элементам кортежа

Доступ к элементам кортежа осуществляется так же, как и к элементам массива, по индексу.

let person: [string, number] = ["Alice", 25];
console.log(person[0]); // Alice
console.log(person[1]); // 25

Присваивание элементов кортежа

Можно присваивать значения отдельным элементам кортежа после его объявления.

let person: [string, number];
person = ["Alice", 25];
person[0] = "Bob";
person[1] = 30;

console.log(person); // ["Bob", 30]

Использование кортежей в функциях

Кортежи часто используются в функциях для возврата нескольких значений различных типов из функции.

function getPerson(): [string, number] {
    return ["Alice", 25];
}

let person = getPerson();
console.log(person[0]); // Alice
console.log(person[1]); // 25

Операции над кортежами

Кортежи, как и массивы, поддерживают методы push, pop, shift, unshift и другие. Однако использование этих методов может нарушить типизацию кортежа, и компилятор TypeScript будет выдавать предупреждения или ошибки.

let tuple: [string, number] = ["hello", 42];
tuple.push("world"); // не рекомендуется, но возможно
console.log(tuple); // ["hello", 42, "world"]
// tuple.push(true); // ошибка: тип 'true' не может быть присвоен типу 'string | number'

Кортежи с необязательными элементами

Кортежи могут содержать необязательные элементы, которые указываются с помощью знака вопроса (?).

let tuple: [string, number?];
tuple = ["hello"];
console.log(tuple); // ["hello"]
tuple = ["hello", 42];
console.log(tuple); // ["hello", 42]

Кортежи с именованными элементами

TypeScript позволяет использовать именованные элементы в кортежах для улучшения читаемости кода.

let person: [name: string, age: number] = ["Alice", 25];
console.log(person[0]); // Alice
console.log(person[1]); // 25

Применение кортежей

Кортежи находят применение во многих областях программирования, включая обработку данных, работу с конфигурациями и API. Рассмотрим несколько примеров.

Пример: возврат нескольких значений из функции

function getCoordinates(): [number, number] {
    let x = 10;
    let y = 20;
    return [x, y];
}

let [x, y] = getCoordinates();
console.log(`X: ${x}, Y: ${y}`); // X: 10, Y: 20

Пример: использование кортежей в интерфейсах

interface IPerson {
    name: string;
    age: number;
    address: [street: string, city: string, country: string];
}

let person: IPerson = {
    name: "Alice",
    age: 25,
    address: ["Main St", "Anytown", "USA"]
};

console.log(person.address); // ["Main St", "Anytown", "USA"]

Пример: деструктуризация кортежей

Кортежи поддерживают деструктуризацию, что позволяет удобно извлекать значения из кортежа.

let person: [string, number] = ["Alice", 25];
let [name, age] = person;
console.log(`Name: ${name}, Age: ${age}`); // Name: Alice, Age: 25

Заключение

Кортежи в TypeScript предоставляют мощный инструмент для работы с наборами значений различных типов. Они обеспечивают строгую типизацию и позволяют точно определять структуру данных, что делает код более предсказуемым и защищенным от ошибок. Кортежи могут использоваться для возврата нескольких значений из функций, работы с конфигурациями и другими задачами, где важно сохранять порядок и типы элементов.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile