Flow
Published in

Flow

Photo by cottonbro from Pexels

Introducing Flow Indexed Access Types

Flow’s Indexed Access Types are a new type annotation syntax that allows you to get the type of a property from an object, array, or tuple type. They are a replacement for the $PropertyType and $ElementType type utilities. Not only are Indexed Access Types much more readable, but they also support autocompleting property names! Example:

type Diff = {
title: string,
};
type Title = Diff['title']; // type Title = string
const title: Title = 'Adopt Indexed Access Types';

If you’re familiar with $PropertyType and $ElementType, here’s a quick conversion guide:

  • $PropertyType<Obj, 'prop'>Obj['prop']
  • $ElementType<Obj, T>Obj[T]
  • $ElementType<$PropertyType<Obj, 'prop'>, T>Obj['prop'][T]

$ElementType and $PropertyType are now deprecated and will be removed in a future version of Flow.

Optional Indexed Access Types

Optional Indexed Access Types work like optional chaining. They allow you to access properties from nullable object types. If before you did:

type T = $ElementType<$NonMaybeType<Obj>, 'prop'> | void;

You can now do:

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

Example:

type TasksContent = ?{
tasks?: Array<{
metadata: {
title: string,
completed: boolean,
},
}>,
};
type TaskData = TasksContent?.['tasks']?.[number]['metadata'];

Like optional chaining, the resulting type of an Optional Indexed Access Type includes void. You can wrap your Optional Indexed Access Type with a $NonMaybeType<...> if you don’t want void in your resulting type.

Enable Indexed Access Types in your project

To support the Indexed Access Types syntax, update your dependencies:

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

We also have an ESLint rule with auto-fixer, you can read the docs for more on how to use it.

Docs

Read the documentation for more on Indexed Access Types.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store