Objects as Maps in Flow

Despite the advent of the Map type, plain objects is an incredibly common way of representing a map. To support this paradigm, Flow offers a very flexible way to express this.

Where Object Maps are Useful

Let’s say you want to write a function that totals the cost of a grocery list. Invoking it will look something like:

// This would return 9.5 (4 + 3 + 2.5).
getTotalCost({
  eggs: 4,
  fruitSnacks: 3,
  toothpaste: 2.5,
});

The list can have any number of items, so you can’t explicitly declare each item as a property. Also, you want to make sure it only takes numbers, so:

getTotalCost({
  eggs: 4,
  toothpaste: 2.5,
  milk: 'Too much',
});

…would give a type error.

Declaring a Type as an Object Map

Like a lot of things with Flow, it’s pretty simple. Just declare a typed key in brackets and give it a type:

type GroceryList = {
  // The keys of the object will be strings.  The values will be numbers.
  [name: string]: number,
};

// From there, use it as any other type.
function getTotalCost(groceryList: GroceryList): number {
  // Take the value of each property, return the sum.
}

getTotalCost will accept an object whose string keys have number values and give a type error for anything else:

// This works.
getTotalCost({
  eggs: 4,
  fruitSnacks: 3,
  toothpaste: 2.5,
});

// Also okay.
getTotalCost({});

// Nope.
getTotalCost({
  eggs: 4,
  toothpaste: 2.5,
  milk: 'Too much',
});