Type Alias для объектов

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

Тренажер по TypeScript

Работа с объектами становится намного удобнее, когда мы используем Type Aliases (псевдонимы типов). Вместо того чтобы дублировать структуру объекта каждый раз, когда мы объявляем переменную или аргумент функции, мы можем создать единое описание с помощью ключевого слова type.

Пример: type User = { name: string; age: number };. Теперь этот псевдоним можно использовать везде, где ожидается объект такой структуры. Это делает код чище, читаемее и упрощает изучение сложных структур данных. Type Aliases отлично подходят для описания форм объектов, объединений и пересечений типов.

В этом блоке вас ждут интерактивные упражнения, где вы научитесь объявлять свои типы для объектов и применять их к переменным. Это важный шаг в освоении TypeScript, который позволяет создавать переиспользуемые и масштабируемые конструкции без лишнего кода.

Список тем

1. Объявление Type Alias

id: 40672_ts_alias_replace_01

В этом задании вам предстоит объявить псевдоним типа (type alias) для объекта, представляющего автомобиль. Вам нужно заполнить пропуски в коде так, чтобы объявление типа Car стало синтаксически корректным и соответствовало стандартам TypeScript. Обратите внимание на ключевые слова и операторы, используемые при создании type alias для объектов.

Заполните пропуски
input1S Car input2S {
  brand: string;
  model: string;
  year: number;
}

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

2. Сопоставление полей и типов

id: 40672_ts_alias_match_02

В левой колонке перечислены названия полей объекта, который описывает пользователя в системе. В правой колонке приведены типы данных TypeScript. Сопоставьте каждое поле объекта с соответствующим ему типом. Обратите внимание, что типы в правой колонке представлены в синтаксисе TypeScript и могут включать как простые типы, так и составные (например, массивы).

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
id
username
isActive
roles
lastLogin
number
string
string[]
boolean
Date
Сообщения
Проверить
Показать подсказку

3. Конструктор типа Product

id: 40672_ts_alias_build_03

Из предложенных строк соберите корректное определение типа Product в TypeScript. Тип должен содержать поля: id (тип number), name (тип string), price (тип number), inStock (тип boolean). Поля должны идти именно в таком порядке. Лишние строки в решение включать не нужно.

Перетяните в правильном порядке строки из одного блока в другой
type Product = {
    id: number;
    name: string;
    price: number;
    inStock: boolean;
}
interface Product {
    id: string;
    category: string;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Синтаксическая ошибка в алиасе

id: 40672_ts_alias_error_04

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

Найдите ошибку и исправьте
type User = {
    name: string;
    age: number,
    email: string;
};
 
const user: User = {
    name: "Alice",
    age: 30,
    email: "alice@example.com"
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Применение типа к переменной

id: 40672_ts_alias_select_fill_05

В данном фрагменте кода объявлен псевдоним типа (type alias) для объекта, описывающего книгу. Необходимо заполнить пропуски, выбрав из выпадающего списка подходящие имена типов, чтобы корректно определить переменные. Обратите внимание, что после двоеточия указывается тип переменной, который должен соответствовать ранее объявленному псевдониму.

Нужно правильно расставить в пропуски предложенные варианты
type Book = {
  title: string;
  author: string;
  year: number;
};

let myBook: input1S = {
  title: "TypeScript in Action",
  author: "Jane Doe",
  year: 2023
};

let anotherBook: input2S = {
  title: "Learning TypeScript",
  author: "John Smith",
  year: 2022
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40672_ts_alias_analyze_06

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

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: "Alice",
  age: 30
};

console.log(`Name: ${person.name}`);
Расположите элементы в логичном порядке
Чтение значения свойства name из объекта person (получение "Alice")
Вывод в консоль строки "Name: Alice" с использованием шаблонного литерала
Создание константы person с явной аннотацией типа Person
Объявление типа Person с полями name (строка) и age (число)
TypeScript проверяет соответствие объекта person объявленному типу Person
Инициализация объекта person: установка свойства age в 30
Инициализация объекта person: установка свойства name в "Alice"
Сообщения
Проверить
Показать подсказку

7. Типы свойств

id: 40672_ts_alias_sort_07

Перед вами список названий свойств объекта, описанного с помощью Type Alias в TypeScript. Распределите каждое название свойства по одной из двух категорий: «String Properties» (свойства строкового типа) или «Number Properties» (свойства числового типа). Для выполнения задания используйте предоставленный код Type Alias, чтобы определить тип каждого свойства. Всего нужно распределить 6 элементов.

Перетяните элементы в соответствующие блоки
String Properties
Number Properties
name
age
city
id
email
score
Сообщения
Проверить
Показать подсказку

8. Выбор обязательных полей

id: 40672_ts_alias_click_08

Перед вами объявление Type Alias для объекта в TypeScript. Внимательно изучите код и отметьте кликом все строки, в которых определены поля объекта (пары "ключ: тип"). Не отмечайте строки с комментариями, объявлением самого псевдонима (type User = {), закрывающей фигурной скобкой или пустыми строками.

Кликните по всем фрагментам, которые подходят под условие задания.
{{type User = {~|~t0}}
{{  // Уникальный идентификатор~|~t1}}
{{  id: number;~|~t2}}
{{  name: string;~|~t3}}
{{  email: string;~|~t4}}
{{  age?: number;~|~t5}}
{{  isActive: boolean;~|~t6}}
{{}~|~t7}}
Сообщения
Проверить
Показать подсказку

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

id: 40672_compiler

Добро пожаловать в мир Type Aliases! В этом примере мы создаем собственный тип User, который описывает структуру объекта. Это позволяет избежать дублирования кода и делает его чище. Попробуйте изменить свойства объекта: добавьте новое поле, например 'email', или сделайте поле 'age' обязательным, удалив знак вопроса. Посмотрите, как TypeScript мгновенно отреагирует на ваши изменения и подсветит ошибки, если данные не соответствуют вашему новому типу!

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