Типизированные массивы
Кортеж — это типизированный массив с фиксированной длиной и фиксированным типом для каждой позиции.
Кортежи полезны тем, что тип каждого элемента массива известен заранее.
Чтобы определить кортеж, запишите тип каждого элемента по порядку внутри квадратных скобок.
В первом примере идут число, логическое значение и строка — именно в таком порядке. Во втором примере значения расставлены в неправильном порядке.
Примечание: Хотя у нас по-прежнему есть boolean, string и number, в кортеже важен порядок, поэтому второе присваивание — ошибка.
Пример
ourTuple должен содержать сначала number, затем boolean, затем string. Присваивание соответствует типу, поэтому ошибки нет.
ourTuple с типом кортежа [number, boolean, string], затем присвойте [5, false, 'Бог программирования был здесь']. Ничего не выводится.
Вывод: программа на TypeScript и захваченный вывод
// определяем наш кортеж
let ourTuple: [number, boolean, string];
// инициализируем правильно
ourTuple = [5, false, 'Бог программирования был здесь'];
Пример
Те же самые значения в неправильном порядке не соответствуют типу кортежа, поэтому это присваивание не компилируется.
ourTuple как [number, boolean, string], затем присвойте [false, 'Бог программирования ошибся', 5] — те же виды значений, но в неправильном порядке — так, чтобы присваивание не скомпилировалось.
Вывод: программа на TypeScript и захваченный вывод
// определяем наш кортеж
let ourTuple: [number, boolean, string];
// инициализирован неправильно, что приводит к ошибке
ourTuple = [false, 'Бог программирования ошибся', 5];
Кортеж только для чтения
Хорошая практика — делать кортеж readonly.
Кортежи имеют строго определённые типы только для своих начальных позиций. В первом примере можно добавить в кортеж новое значение с помощью push и увидеть его в выводе. Во втором примере readonly это запрещает.
Чтобы узнать больше о модификаторах вроде readonly, смотрите главу о классах в TypeScript.
Примечание: Если вы работали с React, то, скорее всего, уже использовали кортежи.
useState возвращает кортеж из значения и функции-сеттера.
const [firstName, setFirstName] = useState('Dylan') — типичный пример.
Благодаря структуре кортежа мы знаем, что первое значение имеет определённый тип, в данном случае string, а второе значение — function.
Пример
Ничто не мешает вызвать push у обычного кортежа, поэтому в него незаметно попадает четвёртое значение, которое видно в выведенном массиве.
ourTuple как [number, boolean, string], присвойте [5, false, 'Бог программирования был здесь'], добавьте методом push строку 'Что-то новое и неправильное' (это разрешено, так как после индекса 2 типобезопасности нет), затем выведите кортеж в консоль, чтобы показать лишнее значение.
Вывод: программа на TypeScript и захваченный вывод
// определяем наш кортеж
let ourTuple: [number, boolean, string];
// инициализируем правильно
ourTuple = [5, false, 'Бог программирования был здесь'];
// у нашего кортежа нет типобезопасности для индексов 3 и далее
ourTuple.push('Что-то новое и неправильное');
console.log(ourTuple);
Пример
С readonly метода push у типа кортежа не существует, поэтому вызов приводит к ошибке компиляции.
readonly нельзя расширить.
Объявите константу ourReadonlyTuple с типом readonly [number, boolean, string] и значением [5, true, 'Настоящий Бог программирования'], затем вызовите push('Бог программирования взял выходной') — компилятор должен сообщить, что push не существует у типа кортежа только для чтения.
Вывод: программа на TypeScript и захваченный вывод
// определяем наш кортеж только для чтения
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'Настоящий Бог программирования'];
// приводит к ошибке, так как кортеж доступен только для чтения.
ourReadonlyTuple.push('Бог программирования взял выходной');
Именованные кортежи
Именованные кортежи позволяют дать каждой позиции имя, которое поясняет, что означает значение по этому индексу.
Примечание: Именованные кортежи дают больше контекста о том, что представляет собой значение каждого индекса.
Синтаксис именованного кортежа
Позиции помечены как x и y, поэтому сразу понятно, что graph содержит пару координат.
const graph: [x: number, y: number] = [55.2, 41.3];
Деструктуризация кортежей
Так как кортежи являются массивами, их можно деструктурировать — за один шаг разложить значения по отдельным переменным.
Примечание: Если деструктуризация вам незнакома, повторите главу о деструктуризации в JavaScript.
Деструктуризация кортежа
x получает 55.2, а y получает 41.3, и обе переменные имеют тип number.
const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;