Tuesday, 11 July, 2017 UTC


Summary

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 { }