Не все свойства объекта всегда обязательны. В TypeScript вы можете пометить свойство как опциональное, добавив знак вопроса ? после его имени. Например: name?: string.
Это означает, что свойство может присутствовать в объекте и быть строкой, либо вообще отсутствовать (быть undefined). Это критически важно при описании конфигураций, ответов от API или параметров функций с настройками по умолчанию. Попытка обратиться к такому свойству требует осторожности, так как оно может не существовать. Данный тренажер поможет научиться правильно объявлять и использовать необязательные поля.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Аннотация типа объекта.
- Опциональные свойства (?).
- Readonly свойства.
- Index Signatures.
- Вложенные объекты.
- Модуль 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, описывающего настройки пользователя. Внимательно изучите код. Ваша задача — найти и выделить кликом все свойства этого интерфейса, которые объявлены как опциональные (то есть помечены вопросительным знаком `?`). Не отмечайте обязательные свойства (без знака `?`), ключевое слово `interface`, имя интерфейса, фигурные скобки, типы данных или точки с запятой.
interface UserSettings {
{{username~|~t1}}: string;
{{email?~|~t2}}: string;
{{age~|~t3}}: number;
{{isSubscribed?~|~t4}}: boolean;
{{lastLogin~|~t5}}: Date;
{{theme?~|~t6}}: 'light' | 'dark';
}2. Добавление модификатора
В этом задании вам нужно изменить интерфейс конфигурации, сделав поля 'timeout' и 'retries' необязательными. Для этого добавьте знак вопроса после имени каждого свойства. Код состоит из 6 строк, и вам нужно заполнить два пропуска, чтобы интерфейс корректно описывал опциональные свойства.
interface Config {
host: string;
port: number;
timeout input1S number;
retries input2S number;
}
const config: Config = {
host: 'localhost',
port: 8080
};3. Создание объекта
В этом задании вам предстоит создать объект, соответствующий интерфейсу с обязательными и опциональными свойствами. В коде TypeScript ниже объявлен интерфейс Book, который содержит обязательные поля title и author, а также опциональное поле year. Вам нужно заполнить пропуски, чтобы создать объект book, который соответствует этому интерфейсу, указав только обязательные свойства. Для этого выберите подходящие ключи и значения из выпадающих списков. Обратите внимание, что опциональные свойства можно опустить, но обязательные должны быть заданы.
interface Book {
title: string;
author: string;
year?: number;
}
const book: Book = {
input1S: input2S,
input3S: input4S
};4. Доступ к несуществующему
Проанализируйте приведённый код на TypeScript. В нём объявлен интерфейс с опциональным свойством, создан объект, соответствующий этому интерфейсу, но без указания опционального свойства. Затем в консоль выводится значение этого опционального свойства. Выберите, что будет выведено в консоль при выполнении этого кода.
interface User {
name: string;
age?: number;
}
const user: User = { name: "Alice" };
console.log(user.age);5. Ошибка типа
В этом фрагменте кода TypeScript допущена ошибка, связанная с использованием опционального свойства. Опциональное свойство может быть undefined, поэтому попытка вызвать на нём метод без предварительной проверки приводит к ошибке компиляции в строгом режиме. Исправьте строку с обращением к свойству, чтобы код стал безопасным и рабочим.
interface User { name?: string;} const user: User = {}; console.log(user.name.toUpperCase());6. Логика проверки
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа проверяет наличие опционального свойства объекта и выполняет соответствующие действия.
interface UserProfile {
username: string;
email?: string; // опциональное свойство
}
function displayContact(user: UserProfile): void {
let contactInfo: string;
if (user.email !== undefined) {
contactInfo = `Email: ${user.email}`;
} else {
contactInfo = 'Email not provided';
}
console.log(`User: ${user.username}`);
console.log(`Contact: ${contactInfo}`);
}
// Входные данные
const currentUser: UserProfile = {
username: 'alex123',
email: 'alex@example.com'
};
displayContact(currentUser);7. Интерфейс профиля
Из предложенных строк соберите объявление интерфейса UserProfile для профиля пользователя. Интерфейс должен содержать обязательное свойство email типа string и два опциональных свойства: phone и avatar (оба типа string). Лишние строки в решение включать не нужно. Убедитесь, что обязательное свойство указано первым, а опциональные — после него, порядок опциональных свойств не важен.
interface UserProfile { email: string; phone?: string; avatar?: string;} name: string; age?: number;const profile: UserProfile = { email: 'user@example.com' };