Enum как тип

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

Особенность enum в TypeScript заключается в том, что он создает не только JavaScript-объект с данными, но и одноименный тип.

Вы можете использовать имя перечисления в аннотациях типов для переменных, аргументов функций и возвращаемых значений. Это гарантирует, что в переменную попадет только одно из значений, перечисленных в enum.

enum Status { Active, Inactive }
function setStatus(s: Status) { ... }

Этот урок покажет, как использовать Enum в качестве типа данных, ограничивая возможные значения переменных и повышая надежность кода.

Список тем

1. Аннотация аргумента

id: 40697_et_01_annotation

В этом задании вам нужно использовать перечисление (enum) в качестве типа для параметра функции. В коде уже определен enum Status с двумя значениями: Active и Inactive. Вам необходимо указать тип параметра s в функции setStatus, используя имя этого перечисления. Заполните пропуск в коде, чтобы функция могла принимать только значения из enum Status.

Заполните пропуски
enum Status {
  Active,
  Inactive
}

function setStatus(s: input1S) {
  console.log(s);
}

setStatus(Status.Active);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Где тип, а где значение?

id: 40697_et_02_click

Перед вами фрагмент кода на TypeScript, содержащий объявление перечисления (enum) и его использование. Внимательно изучите код. Ваша задача — кликнуть на все места, где имя этого перечисления используется именно как ТИП (для аннотации типа переменной, параметра функции или возвращаемого значения). Не отмечайте места, где перечисление используется как значение (например, при обращении к его членам через точку) или где оно объявляется.

Кликните по всем фрагментам, которые подходят под условие задания.
enum {{Color~|~t0}} {
  Red,
  Green,
  Blue
}

let {{favoriteColor~|~t1}}: {{Color~|~t2}} = {{Color~|~t3}}.Green;
let {{defaultColor~|~t4}}: {{Color~|~t5}} = {{Color~|~t6}}.Red;

function getColorName({{c~|~t7}}: {{Color~|~t8}}): string {
  switch ({{c~|~t9}}) {
    case {{Color~|~t10}}.Red: return "Red";
    case {{Color~|~t11}}.Green: return "Green";
    default: return "Blue";
  }
}

const {{currentColor~|~t12}}: {{Color~|~t13}} = {{Color~|~t14}}.Blue;
Сообщения
Проверить
Показать подсказку

3. Совместимость типов

id: 40697_et_03_predict

Проанализируйте приведённый фрагмент кода на TypeScript. Обратите внимание на определение числового enum и попытку присвоить переменной этого типа числовое значение, которое не содержится в перечислении. Учитывая, что используется строгая типизация TypeScript, определите, что произойдёт при компиляции этого кода.

Выберите правильный вариант ответа
enum Status {
  Active = 1,
  Inactive = 2
}

let currentStatus: Status;
currentStatus = 5; // Эта строка вызовет ошибку компиляции?
Сообщения
Проверить
Показать подсказку

4. Выбор поля из типа

id: 40697_et_04_select

В данном фрагменте кода TypeScript определён enum Color. Необходимо правильно типизировать поле color в интерфейсе Car, а затем присвоить этому полю значение из enum. Для заполнения пропусков используйте выпадающие списки. Обратите внимание, что поле color должно иметь тип Color и принимать одно из значений этого enum.

Нужно правильно расставить в пропуски предложенные варианты
enum Color {
  Red,
  Green,
  Blue
}

interface Car {
  brand: string;
  color: input1S;
}

const myCar: Car = {
  brand: 'Toyota',
  color: input2S
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Неверное присваивание

id: 40697_et_05_error

В данном фрагменте TypeScript-кода допущена ошибка при присваивании значения переменной, тип которой указан как Enum. Переменной пытаются присвоить строковый литерал, который внешне похож на ключ Enum, но не является корректным значением этого типа. Исправьте строку с ошибкой, чтобы код стал рабочим и типобезопасным.

Найдите ошибку и исправьте
enum Status {
    Active,
    Inactive,
    Pending
}
let currentStatus: Status = "Active";
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Логика проверки типа

id: 40697_et_07_analyze

Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа обрабатывает входное значение Enum и что выводит в консоль.

enum Status {
  Active = 'ACTIVE',
  Inactive = 'INACTIVE',
  Pending = 'PENDING'
}

function checkStatus(status: Status): string {
  switch (status) {
    case Status.Active:
      return 'Статус активен';
    case Status.Inactive:
      return 'Статус неактивен';
    case Status.Pending:
      return 'Статус в ожидании';
    default:
      return 'Неизвестный статус';
  }
}

const currentStatus: Status = Status.Active;
console.log(checkStatus(currentStatus));
Расположите элементы в логичном порядке
Вызывается функция checkStatus с аргументом currentStatus.
Создаётся переменная currentStatus и инициализируется значением Status.Active.
Результат вызова функции (строка 'Статус активен') выводится в консоль.
Объявляется функция checkStatus, которая принимает параметр типа Status и возвращает строку.
Объявляется Enum Status с тремя значениями: Active, Inactive, Pending.
Внутри функции switch проверяет значение status. Поскольку оно равно Status.Active, выполняется соответствующий case и возвращается строка 'Статус активен'.
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40697_compiler

Откройте для себя мощь TypeScript, используя Enum не просто как список констант, а как полноценный тип данных. В этом примере вы увидите, как компилятор защищает ваш код от передачи неверных значений в функции. Попробуйте добавить новую роль в систему, например 'Editor', и обновить логику разрешений. Проверьте, что произойдет, если вы попытаетесь передать обычную строку вместо значения Enum — вы увидите, как строгая типизация предотвращает потенциальные баги еще до запуска кода!

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру