TypeScript Кортежі
Типізовані масиви
Кортеж – це типізований масив із попередньо визначеною довжиною та типами для кожного індексу.
Кортежі корисні, оскільки дозволяють кожному елементу в масиві бути відомим типом значення.
Щоб визначити кортеж, укажіть тип кожного елемента в масиві:
Приклад
// визначити кортеж
let ourTuple: [number, boolean, string];
// ініціалізовано правильно
ourTuple = [5, false, 'Бог кодування був тут'];
Спробуйте самі »
Як бачите, у нас є число, логічний вираз і рядок. Але що станеться, якщо ми спробуємо встановити їх у неправильному порядку:
Приклад
// визначити кортеж
let ourTuple: [number, boolean, string];
// ініціалізовано неправильно, що викликає помилку
ourTuple = [false, 'Бог кодування помилився', 5];
Спробуйте самі »
Незважаючи на те, що ми маємо boolean, string та number порядок має значення в нашому кортежі та викличе помилку.
Кортеж лише для читання
Краще зробити свій кортеж readonly.
Кортежі мають лише чітко визначені типи для початкових значень:
Приклад
// визначити кортеж
let ourTuple: [number, boolean, string];
// ініціалізовано правильно
ourTuple = [5, false, 'Бог кодування був тут'];
// У нашому кортежі для індексів немає безпеки типу 3+
ourTuple.push('Щось нове і неправильне');
console.log(ourTuple);
Спробуйте самі »
Ви бачите, що нові valueTuples мають лише чітко визначені типи для початкових значень:
Приклад
// визначити кортеж лише для читання
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'Справжній бог кодування'];
// видає помилку, оскільки він лише для читання.
ourReadonlyTuple.push('Бог кодування взяв вихідний');
Спробуйте самі »
Щоб дізнатися більше про модифікатори доступу, такі як readonly, перейдіть до розділу про них тут: TypeScript Класи.
Якщо ви коли-небудь використовували React раніше, швидше за все, ви працювали з кортежами.
useState повертає кортеж значення та функцію встановлення.
const [firstName, setFirstName] = useState('Dylan') є типовим прикладом.
Через структуру ми знаємо, що наше перше значення в нашому списку буде певним типом значення, у цьому випадку це string, а друге значення є function.
Іменовані кортежі
Іменовані кортежі дозволяють нам надавати контекст для наших значень у кожному індексі.
Приклад
const graph: [x: number, y: number] = [55.2, 41.3];
Іменовані кортежі надають більше контексту для значень наших індексів.
Деструктурування кортежів
Оскільки кортежі є масивами, ми також можемо їх деструктурувати.
Приклад
const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;
Щоб переглянути деструктуризацію, перевірте це тут.
