フロータイプエイリアス

投稿日: 2022-04-20 2022-04-20

リテラルとしてのみ記述された場合、Flowは非常に迅速に冗長になる傾向があります。繰り返される型を型エイリアスとして宣言すると便利なことがよくあります。

タイプエイリアスの宣言

ToDoリストを操作する関数を作成しているとしましょう。

// 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.
}

{id: number, name: string, completed: boolean}が何度も繰り返されることに気づいたかもしれません。本当に冗長であることに加えて、これには他の問題があります。 ToDoアイテム（dateCompleted、assignedToなど）に何かを追加する場合は、{id: number, name: string, completed: boolean}のすべてのインスタンスを編集する必要があります。これは、面倒でエラーが発生しやすくなります。

したがって、代わりに、それを独自のタイプとしてTodoItemというエイリアスを付けましょう。変数を宣言するように、非常に簡単です。

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

そこから、他のタイプと同じようにTodoItemをタイプとして使用できます。

// 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.
}

タイプエイリアスのエクスポート

TodoItemは他のファイルでも使用できます。次のようにエクスポートとしてマークするだけです。

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

function somethingThatTakesATodoItem(item: TodoItem): void {

}

getdocs

13036