Flow Type Aliases

When written solely as literals, Flow has a tendency to get very verbose very quickly. It is often useful to declare repeated types as type aliases.

Declaring a Type Alias

Let’s say you’re writing functions to manipulate todo lists:

// Add a new todo item to `todos` and return the new item.
function addTodo(
  todos: Array<{id: number, name: string, completed: boolean}>,
  name: string,
): {id: number, name: string, completed: boolean} {
  // Implementation omitted for brevity.
}

// Get a todo item from `todos` by `id`.
function getTodo(
  todos: Array<{id: number, name: string, completed: boolean}>,
  id: number,
): {id: number, name: string, completed: boolean} {
  // Implementation omitted for brevity.
}

// Get all incomplete todo items in `todos`.
function getIncompleteTodos(
  todos: Array<{id: number, name: string, completed: boolean}>,
): Array<{
  id: number,
  name: string,
  completed: boolean,
}> {
  // Implementation omitted for brevity.
}

You probably noticed that {id: number, name: string, completed: boolean} gets repeated a lot. Besides being really verbose, this has other problems; if you want to add something to your todo items (dateCompleted, assignedTo, et cetera), you have to edit every single instance of {id: number, name: string, completed: boolean}, which is tedious and error-prone.

So, instead, let’s alias that as its own type, TodoItem. It’s pretty simple, like declaring a variable:

type TodoItem = {id: number, name: string, completed: boolean};

From there, you can use TodoItem as a type as you would any other type.

// The type alias.
type TodoItem = {id: number, name: string, completed: boolean};

// Add a new todo item to `todos` and return the new item.
function addTodo(todos: Array<TodoItem>, name: string): TodoItem {
  // Implementation omitted for brevity.
}

// Get a todo item from `todos` by `id`.
function getTodo(todos: Array<TodoItem>, id: number): TodoItem {
  // Implementation omitted for brevity.
}

// Get all incomplete todo items in `todos`.
function getIncompleteTodos(todos: Array<TodoItem>): Array<TodoItem> {
  // Implementation omitted for brevity.
}

Exporting Type Aliases

TodoItem can be used in other files, too. Just mark it as an export like this:

// todos.js
export type TodoItem = {id: number, name: string, completed: boolean};
// someOtherFile.js
import type {TodoItem} from './todos';

function somethingThatTakesATodoItem(item: TodoItem): void {

}