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

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

type Person = {name: string, age: number};
type Age = Person['age']; // number

Когда это использовать​

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

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

Получение доступа к свойству типа объекта:

type Cat = {
  name: string,
  age: number,
  hungry: boolean,
};


type Hungry = Cat['hungry']; // type Hungry = boolean
const isHungry: Hungry = true; // OK - `Hungry` is an alias for `boolean`


// The index can be a type, not just a literal:
type AgeProp = 'age';
type Age = Cat[AgeProp]; // type Age = number
const catAge: Age = 6; // OK - `Age` is an alias for `number`

Получение доступа к элементу типа массива по индексу массива (который имеет тип number):

type CatNames = Array<string>;


type CatName = CatNames[number]; // type CatName = string
const myCatsName: CatName = 'whiskers'; // OK - `CatName` is an alias for `string`

Получение доступа к элементам типа кортежа:

type Pair = [string, number];


const name: Pair[0] = 'whiskers'; // OK - `Pair[0]` is an alias for `string`
const age: Pair[1] = 6; // OK - `Pair[1]` is an alias for `number`
const wrong: Pair[2] = true; // Error - `Pair` only has two elements

Индексом может быть объединение, в том числе результат вызова keyof:

type Cat = {
  name: string,
  age: number,
  hungry: boolean,
};


type CatValues = Cat[keyof Cat]; // type CatValues = string | number | boolean

Индексом также может быть обобщённый тип:

function getProp<O extends {readonly [string]: unknown}, K extends keyof O>(o: O, k: K): O[K] {
  return o[k];
}


const x: number = getProp({a: 42}, 'a'); // OK
const y: string = getProp({a: 42}, 'a'); // Error - `number` is not a `string`
getProp({a: 42}, 'b'); // Error - `b` does not exist in object type

Такие обращения можно вкладывать друг в друга:

type Cat = {
  name: string,
  age: number,
  hungry: boolean,
  personality: {
    friendly: boolean,
    hungerLevel: number,
  }
};


type Friendly = Cat['personality']['friendly']; // type Friendly = boolean
const isFriendly: Friendly = true; // Pet the cat

Типы доступа по необязательному индексу​

Типы доступа по необязательному индексу работают подобно необязательной цепочке. Они позволяют обращаться к свойствам типов объектов, допускающих null:

type T = Obj?.['prop'];

Как и при необязательной цепочке, результирующие типы доступа по необязательному индексу включают void. Если цепочка вложенных необязательных обращений длинная, можно обернуть её целиком в NonNullable<...>, если вы не хотите, чтобы void входил в результирующий тип.

Пример:

type TasksContent = ?{
  tasks?: Array<{
    items?: {
      metadata?: {
        title: string,
        completed: boolean,
      },
    },
  }>,
};


type TaskData = TasksContent?.['tasks']?.[number]?.['items']?.['metadata'];

Между необязательной цепочкой и типами доступа по необязательному индексу есть одно небольшое различие. Если тип объекта, к которому выполняется обращение, не допускает null, результирующий тип необязательной цепочки не будет включать void. Для типов доступа по необязательному индексу по причинам реализации результирующий тип всегда будет включать void. Однако, если тип объекта не допускает null, использовать тип доступа по необязательному индексу не нужно — используйте обычный тип доступа по индексу.

Подключение​

Чтобы использовать типы доступа по индексу, обновите инфраструктуру так, чтобы она поддерживала этот синтаксис:

• flow и flow-parser: 0.155
• prettier: 2.3.2
• babel: 7.14

Установите eslint-plugin-fb-flow и добавьте fb-flow в список плагинов ESLint. Затем включите правило в конфигурации ESLint:

'fb-flow/use-indexed-access-type': 1,

См. также​

• Объекты — основной тип, с которым используется доступ по индексу
• Отображаемые типы — преобразование типов объектов, часто в сочетании с доступом по индексу
• Условные типы — условные выражения на уровне типов, часто используемые вместе с доступом по индексу
• Вспомогательные типы — keyof, Pick и другие встроенные помощники для работы с типами
• Модернизация устаревшего синтаксиса Flow — переход от устаревших утилит $PropertyType / $ElementType к доступу по индексу T[K]