Создание Type Alias [Модуль 10: Type Aliases]: Тренажер по TypeScript

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

Псевдонимы типов (Type Aliases) позволяют создавать собственные имена для любых типов данных. Это делается с помощью ключевого слова type. Например: type ID = string | number;.

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

Список тем

Модуль 1: Введение в TypeScript
- Аннотация типа переменной.
- Автоматический вывод типов (Type Inference).
- Ошибки типизации при компиляции.
Модуль 2: Примитивные типы
- Тип string.
- Тип number.
- Тип boolean.
- Типы null и undefined.
- Тип symbol.
- Тип bigint.
Модуль 3: Специальные типы
- Тип any.
- Тип unknown.
- Тип void.
- Тип never.
- Разница между any и unknown.
Модуль 4: Массивы
- Типизация массивов (Type[]).
- Типизация массивов (Array).
- Массивы с несколькими типами.
- Readonly массивы.
Модуль 5: Кортежи (Tuples)
- Объявление кортежей.
- Опциональные элементы в кортежах.
- Rest элементы в кортежах.
- Readonly кортежи.
Модуль 6: Объекты
- Аннотация типа объекта.
- Опциональные свойства (?).
- Readonly свойства.
- Index Signatures.
- Вложенные объекты.
Модуль 7: Функции
- Типизация параметров функции.
- Типизация возвращаемого значения.
- Опциональные параметры.
- Параметры по умолчанию.
- Rest параметры.
- Типизация стрелочных функций.
- Тип Function.
- Callback функции.
Модуль 8: Union типы
- Объявление Union типов.
- Union с примитивами.
- Union с null и undefined.
- Сужение Union типов (Narrowing).
Модуль 9: Литеральные типы
- String Literal Types.
- Number Literal Types.
- Boolean Literal Types.
- Литеральные Union типы.
- as const утверждение.
Модуль 10: Type Aliases
- Создание Type Alias.
- Type Alias для объектов.
- Type Alias для Union типов.
- Type Alias для функций.
- Пересечение типов (Intersection).
Модуль 11: Интерфейсы
- Объявление интерфейса.
- Опциональные свойства в интерфейсах.
- Readonly свойства в интерфейсах.
- Расширение интерфейсов (extends).
- Множественное наследование интерфейсов.
- Интерфейсы для функций.
- Declaration Merging.
- Interface vs Type Alias.
Модуль 12: Type Guards и Narrowing
- typeof guard.
- Truthiness narrowing.
- Equality narrowing.
- in operator narrowing.
- instanceof guard.
- Пользовательские Type Guards (is).
Модуль 13: Enums
- Числовые Enums.
- Строковые Enums.
- Гетерогенные Enums.
- const Enums.
- Enum как тип.
Модуль 14: Классы
- Типизация свойств класса.
- Модификатор public.
- Модификатор private.
- Модификатор protected.
- Модификатор readonly в классах.
- Сокращенная инициализация в конструкторе.
- Реализация интерфейсов (implements).
- Абстрактные классы.
- Static свойства и методы.
- Getters и Setters.
Модуль 15: Generics — основы
- Введение в Generics.
- Generic функции.
- Несколько типовых параметров.
- Generic интерфейсы.
- Generic Type Aliases.
- Generic классы.
Модуль 16: Generics — ограничения
- Generic Constraints (extends).
- Использование keyof с Generics.
- Значения по умолчанию для Generic.
Модуль 17: Utility Types — базовые
- Partial.
- Required.
- Readonly.
- Pick.
- Omit.
- Record.
Модуль 18: Utility Types — работа с Union
- Exclude.
- Extract.
- NonNullable.
Модуль 19: Utility Types — функции
- ReturnType.
- Parameters.
- Awaited.
Модуль 20: Type Assertions
- Утверждение типа (as).
- Угловые скобки ().
- Non-null assertion (!).
- as const.
- Двойное утверждение (as unknown as T).
Модуль 21: Keyof и Typeof операторы
- Оператор keyof.
- Оператор typeof в типах.
- Комбинация keyof typeof.
- Indexed Access Types.
Модуль 22: Mapped Types
- Основы Mapped Types.
- Модификаторы в Mapped Types (+, -).
- Key Remapping (as).
Модуль 23: Conditional Types
- Основы Conditional Types.
- Distributive Conditional Types.
- Ключевое слово infer.
Модуль 24: Discriminated Unions
- Паттерн Discriminated Union.
- Exhaustiveness checking.
- Switch с Discriminated Unions.
Модуль 25: Модули и типы
- Export типов и интерфейсов.
- Import типов.
- import type синтаксис.
- Re-export типов.
Модуль 26: Declaration Files
- Что такое .d.ts файлы.
- Declare keyword.
- @types пакеты.
Модуль 27: Типизация асинхронного кода
- Типизация Promise.
- Async/await с типами.
- Promise.all типизация.
Модуль 28: Практические паттерны
- Типизация событий DOM.
- Типизация fetch запросов.
- Типизация JSON данных.
- Типизация localStorage.

1. Объявление алиаса

id: 40671_alias_01_replace

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

Заполните пропуски

// Объявите алиас типа с именем MyString для типа string
input1S MyString input2S string;

Результат

// Объявите алиас типа с именем MyString для типа string
type MyString = string;

Сообщения

Проверить

Показать решение на 3 сек.

Показать подсказку

2. Алиас для объекта

id: 40671_alias_02_build

Из предложенных строк соберите корректное определение типа (type alias) User на TypeScript, который должен содержать два обязательных поля: id (тип number) и username (тип string). Игнорируйте лишние строки, которые не относятся к определению этого типа. Порядок объявления полей внутри типа не имеет значения, но структура должна быть синтаксически правильной.

Перетяните в правильном порядке строки из одного блока в другой

type User = {

  id: number;

  username: string;

  email: string;

type Admin = {

Результат

type User = {
  id: number;
  username: string;
}

Сообщения

Проверить

Показать решение на 3 сек.

Показать подсказку

3. Применение алиаса

id: 40671_alias_03_select

В данном фрагменте кода объявлен алиас типа Point, представляющий точку с координатами x и y. Используя выпадающие списки, выберите правильный тип (алиас Point) для объявления переменных p1 и p2, чтобы код стал корректным. Обратите внимание, что переменные должны быть именно типа Point, так как они хранят объекты с полями x и y.

Нужно правильно расставить в пропуски предложенные варианты

// Объявление алиаса типа для точки
type Point = { x: number; y: number };

// Создание переменной p1 типа Point
let p1: input1S = { x: 10, y: 20 };

// Создание переменной p2 типа Point
let p2: input2S = { x: 0, y: 0 };

// Копирование переменной p1 в p3
let p3: input3S = p1;

Результат

// Объявление алиаса типа для точки
type Point = { x: number; y: number };

// Создание переменной p1 типа Point
let p1: Point = { x: 10, y: 20 };

// Создание переменной p2 типа Point
let p2: Point = { x: 0, y: 0 };

// Копирование переменной p1 в p3
let p3: Point = p1;

Сообщения

Проверить

Показать решение на 3 сек.

Показать подсказку

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

id: 40671_alias_04_error

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

Найдите ошибку и исправьте

type UserData: {

  name: string;

  age: number;

};

Сообщения

Проверить

Показать решение на 3 сек.

Показать подсказку

5. Типы и их описания

id: 40671_alias_05_compare

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру

Coordinates

Callback

User

Status

{ id: number; name: string; email: string; }

string | number

'active' | 'inactive' | 'pending'

{ x: number; y: number; }

(result: string) => void

Сообщения

Проверить

Показать подсказку

6. Валидность имен

id: 40671_alias_06_sort

Перед вами список названий, которые предлагается использовать для type alias в TypeScript. Ваша задача — распределить их по двум категориям: 'Корректный PascalCase' и 'Нарушение конвенции'. В TypeScript для именования type alias принято использовать стиль PascalCase, где каждое слово начинается с заглавной буквы, например, UserInfo. Имена, которые не следуют этому стилю (начинаются со строчной буквы, содержат подчеркивания, начинаются с цифр и т.п.), считаются нарушением. Выберите для каждого названия соответствующую категорию.

Перетяните элементы в соответствующие блоки

Корректный PascalCase

Нарушение конвенции

UserInfo

ProductDetails

OrderStatus

user_info

123Type

myType

$SpecialType

TYPE_ALL_CAPS

Результат

Вы правильно распределили названия типов. Корректные имена в PascalCase облегчают чтение кода и следуют общепринятым соглашениям TypeScript.

Сообщения

Проверить

Показать подсказку

Создание Type Alias

1. Объявление алиаса

2. Алиас для объекта

3. Применение алиаса

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

5. Типы и их описания

6. Валидность имен

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