Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Аннотации типов Основы Typescript

В этом уроке мы научимся использовать аннотации типов.

Использование аннотации типов

В простых случаях тип массива определяется как название типа и квадратные скобки после него, например: string[], number[]. Эта схема работает и с псевдонимами типов:

type User = {
  name: string
};

// При определении констант и переменных
const users: User[] = [];

// В определении функций
function foo(users: User[]) {
  // ...
}

Здесь мы определяем массив, элементами которого являются объекты типа User. В таком массиве можно хранить только объекты, которые соответствуют типу User.

В случае составных типов, например, если мы хотим использовать объединение или описание объекта, добавляются круглые скобки — (Type)[]:

const users: ({ name: string })[] = [];
const users: (string | null)[] = [];
const users: (User | null | { name: string })[] = [];

Внутри круглых скобок стоит описание типа, а затем уже идут квадратные скобки.

Также TypeScript дает еще один универсальный синтаксис, с помощью которого можно описать любой массив. Описание типа в такой записи выглядит так: Array<Type>. Здесь мы используем угловые скобки, чтобы указать обобщенный тип данных, где Type представляет собой тип элементов, содержащихся в массиве.

Посмотрим, как это выглядит в коде:

const users: Array<User> = [];
const users: Array<number> = [];
const users: Array<User> = [];

const users: Array<{ name: string }> = [];
const users: Array<string | null> = [];

Обычно так не делают. Там, где можно использовать более короткий вариант, используют его. Форма Array нужна в первую очередь для дженериков, которые рассмотрим позже.

Определение пустого массива

Если определить пустой массив и не указать тип, то его типом автоматически станет any[]. В такой массив можно добавить любые данные, включая вложенные массивы:

const items = [];
items.push(1);
items.push('wow');
items.push(['code-basics', 'hexlet']);

Код с any будет работать всегда, но он выключает проверку типов. Чтобы этого не происходило, нужно всегда явно типизировать пустой массив:

const items: Array<number> = [];

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 2 мая
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 2 мая

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»