Кортежи (tuples) представляют собой типизированные массивы с фиксированной длиной и известными типами для каждого индекса.
Они удобны тем, что позволяют каждому элементу массива иметь известный тип данных.
Чтобы определить кортеж, нужно указать тип каждого элемента массива:
Пример
// определяем кортеж
let ourTuple: [number, boolean, string];
// правильно инициализируем
ourTuple = [5, false, 'Coding God was here'];
Видим, что у нас есть число, булевый тип и строка.
Но что произойдет, если попытаться задать их в неправильном порядке?
Пример
// определяем кортеж
let ourTuple: [number, boolean, string];
// пытаемся инициализировать неправильно, что вызывает ошибку
ourTuple = [false, 'Coding God was mistaken', 5];
Даже несмотря на то, что мы передаем все те же булевый тип, строку и число, в кортеже важен порядок элементов, и неправильное размещение вызовет ошибку.
Кортежи только для чтения
Хорошей практикой является создание кортежей только для чтения при помощи ключевого слова readonly.
Кортежи обладают жестко определёнными типами только для первоначальных значений:
Пример
// определяем кортеж
let ourTuple: [number, boolean, string];
// правильно инициализируем
ourTuple = [5, false, 'Coding God was here'];
// у нас нет типовой безопасности для индексов 3 и дальше
ourTuple.push('Something new and wrong');
console.log(ourTuple);
Видим, что новое значение добавляется без ошибок, что нарушает типовую безопасность.
Кортежи обладают жестко определёнными типами только для первоначальных значений:
Пример
// определяем кортеж только для чтения
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'The Real Coding God'];
// попытка добавления вызывает ошибку, так как кортеж объявлен только для чтения
ourReadonlyTuple.push('Coding God took a day off');
Чтобы узнать больше о модификаторах доступа, таких как readonly, ознакомьтесь с нашим разделом о классах TypeScript.
Если вы раньше работали с React, то наверняка использовали кортежи.
useState возвращает кортеж из значения и функции-сеттера.
const [firstName, setFirstName] = useState('Dylan'); это обычный пример использования.
Благодаря структуре мы знаем, что первое значение в списке будет определённого типа (в данном случае строка), а второе значение — функция.
Именованные кортежи
Именованные кортежи позволяют нам предоставить контекст для наших значений по каждому индексу.
Пример
const graph: [x: number, y: number] = [55.2, 41.3];
Именованные кортежи дают больше контекста для значений по индексам.
Деструктуризация кортежей
Поскольку кортежи — это массивы, мы также можем деструктуризировать их.
Пример
const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;
Чтобы освежить знания о деструктуризации, ознакомьтесь с разделом по деструктуризации.
