логотип PurpleSchool
логотип PurpleSchool

Типы доступа по индексу в TypeScript

Автор

Дмитрий Нечаев

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

Определение

Используя типы доступа по индексу, можно указать тип с помощью индекса другого типа. Основной синтаксис выглядит следующим образом:

Type[KeyType]

где Type — это тип, к свойствам которого вы хотите получить доступ, а KeyType — это тип ключа, который используется для индексации.

Примеры использования

Допустим, у нас есть объект с типом User, и мы хотим получить тип одного из его свойств:

interface User {
  id: number;
  name: string;
  age: number;
}

// Тип для свойства 'name'
type UserName = User["name"];  // string

В этом примере UserName теперь является типом string, так как свойство name в интерфейсе User имеет тип string.

Сложные структуры

Типы доступа по индексу особенно полезны, когда вы работаете со сложными или вложенными структурами. Рассмотрим следующий пример с вложенными объектами:

interface Product {
  id: number;
  details: {
    name: string;
    price: number;
  }
}

// Доступ к типу вложенного свойства 'price'
type ProductPrice = Product["details"]["price"];  // number

Здесь ProductPrice определяется как number, так как это тип свойства price внутри вложенного объекта details.

Динамический доступ

Можно также использовать переменные для динамического определения типов с помощью индексированных типов доступа:

type Keys = "id" | "name" | "age";
type UserProperty = User[Keys];  // number | string

Этот пример показывает, как можно извлечь типы нескольких свойств одновременно, где UserProperty будет соответствовать типам всех указанных свойств (id, name, age).

Заключение

Типы доступа по индексу в TypeScript представляют собой мощный инструмент для управления типами данных в сложных структурах. Они обеспечивают гибкость и безопасность при обращении к данным, позволяя разработчикам чётко определять, какие данные и какого типа они могут использовать в своих проектах. Эта возможность является одним из множества примеров того, как TypeScript улучшает поддержку типов и структур данных по сравнению с JavaScript.

Стрелочка влевоОператор типа keyof в TypeScriptGenerics в TypeScriptСтрелочка вправо

Постройте личный план изучения Typescript до уровня Middle — бесплатно!

Typescript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Typescript

Открыть базу знаний

Лучшие курсы по теме

изображение курса

TypeScript с нуля

Антон Ларичев
иконка часов21 бесплатный урок
иконка звёздочки рейтинга4.7
Backend
Frontend
Mobile
изображение курса

CSS Flexbox

Антон Ларичев
иконка часов28 бесплатных уроков
иконка звёздочки рейтинга4.9
Frontend
изображение курса

Next.js - с нуля

Антон Ларичев
иконка часов23 бесплатных урока
иконка звёздочки рейтинга4.7
Frontend