Иногда структура данных подразумевает, что некоторые элементы могут отсутствовать. В TypeScript кортежи поддерживают опциональные элементы. Это делается с помощью знака вопроса ? после типа элемента.
Пример: [number, number?] описывает массив, где второй элемент может быть числом, а может отсутствовать. Это влияет на свойство length и на проверки типов при доступе к элементу.
В этом блоке мы рассмотрим визуализацию кода с опциональными кортежами. Вы научитесь правильно расставлять знаки вопроса (помните, обязательные элементы не могут идти после опциональных!) и обрабатывать ситуации, когда значение undefined. Проходите уроки и решайте тесты для закрепления материала.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Объявление кортежей.
- Опциональные элементы в кортежах.
- Rest элементы в кортежах.
- Readonly кортежи.
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Синтаксис опциональности
В TypeScript кортежи (tuples) могут содержать опциональные элементы, которые обозначаются специальным синтаксисом. Дан код объявления типа кортежа. Вставьте знак `?` в правильное место, чтобы сделать последний элемент кортежа опциональным. Это позволит создавать экземпляры кортежа как с этим элементом, так и без него, сохраняя строгую типизацию остальных позиций.
type UserProfile = [
string,
number,
boolean input1S
];2. Присваивание значений
В этом задании вам нужно заполнить пропуски в коде TypeScript, чтобы продемонстрировать валидные присваивания для кортежа с опциональным элементом. Тип кортежа `[string, number?]` означает, что первый элемент — строка, а второй (опциональный) — число. Выберите из списка вариантов присваивание с одним элементом (только строка) и присваивание с двумя элементами (строка и число). Обратите внимание на синтаксис литералов массивов и типы элементов.
let myTuple: [string, number?];
// Присваивание с одним элементом
myTuple = input1S;
// Присваивание с двумя элементами
myTuple = input2S;
// Выводим оба элемента
console.log(myTuple[0]);
console.log(myTuple[1]);3. Ошибка позиции
В этом фрагменте кода TypeScript допущена ошибка в объявлении кортежа с опциональными элементами. Один из элементов помечен как опциональный, но стоит перед обязательным, что нарушает правила TypeScript. Найдите строку с ошибкой и исправьте её, чтобы код стал корректным. Обратите внимание на порядок элементов и использование знака вопроса для опциональности.
let personInfo: [string?, number];personInfo = ["Alice", 30];console.log(personInfo[0]);console.log(personInfo[1]);4. Длина кортежа
Проанализируйте приведённый фрагмент кода на TypeScript, определяющий кортеж с опциональным элементом. Определите, какие длины может иметь массив, соответствующий этому типу. Выберите правильный вариант из предложенных.
type OptionalTuple = [number, number?];
const tuple1: OptionalTuple = [42];
const tuple2: OptionalTuple = [42, 24];
// const tuple3: OptionalTuple = []; // Ошибка: слишком мало элементов
// const tuple4: OptionalTuple = [42, 24, 100]; // Ошибка: слишком много элементов5. Проверка существования
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа работает с опциональным элементом кортежа: получение элемента по индексу, проверка на undefined и использование значения.
let person: [string, number?] = ["Alex"];
let age = person[1];
if (age !== undefined) {
console.log(`Age: ${age}`);
} else {
console.log("Age not provided");
}undefined (ветвление if/else)ageundefined (ветка else)person с опциональным вторым элементом и инициализация только первым элементом6. Выбор валидных строк
Дано определение типа кортежа с опциональными элементами. Ниже приведены 10 попыток присвоения переменной этого типа. Внимательно изучите код и отметьте только те строки, которые не вызовут ошибок компиляции TypeScript. Не отмечайте строки, которые приведут к ошибке типизации или нарушению структуры кортежа.
type MyTuple = [string, number?, boolean?];
{{let a: MyTuple = ["hello"];~|~t1}}
{{let b: MyTuple = [123];~|~t2}}
{{let c: MyTuple = ["hello", 42];~|~t3}}
{{let d: MyTuple = ["hello", "world"];~|~t4}}
{{let e: MyTuple = ["hello", 42, true];~|~t5}}
{{let f: MyTuple = ["hello", undefined, true];~|~t6}}
{{let g: MyTuple = [];~|~t7}}
{{let h: MyTuple = ["hello", 42, "extra"];~|~t8}}
{{let i: MyTuple = ["hello", 42, true, "extra"];~|~t9}}
{{let j: MyTuple = ["hello", undefined];~|~t10}}