Table of Contents
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 {
}
