【TypeScript】typeエイリアス/型エイリアスとは何か？使い方を実例で解説

TypeScriptでコードを読みやすく、管理しやすくするために欠かせないのが「型エイリアス（Type エイリアス）」です。

この記事では、「そもそも型エイリアスとは何？」という基本的な疑問から、type キーワードを使った定義方法、そしてオブジェクトやユニオン型に別名を与える具体的な使い方までを、初心者の方にも分かりやすい実例を交えて解説しています。

型エイリアスとは何か？(typeエイリアス)

型エイリアスは、既存の型に新しい名前（別名）を付けるための機能です。

「あだ名」をつけるイメージで、元の型の名前（本名）はそのままに、コード内で使いやすいように短い名前や意味の分かりやすい名前を付けられます。

型エイリアスの書き方

型エイリアスは typeキーワードを使って好きな名前をつけて、型を定義します。

type 新しい名前 = 型の定義;

実例１：変数と関数への適用

例えば、Pointという名前の型を作成する場合は以下のようにします。

type Point = {
  x: number;
  y: number;
};

変数などに対してPointを適用する場合、その変数は必ずxとyというプロパティを持ち、かつ、引数の型はnumberである必要があります。

const coordinate: Point = { x: 10, y: 20 };

この型を関数の引数にも適用することができます。

function printCoord(pt: Point) {
  console.log(`x: ${pt.x}, y: ${pt.y}`);
}

printCoord(coordinate);

実例２：ユニオン型への適用

ユニオン型という複数の型のうちどれか一つであることを示す型を定義できますが、これに対しても、型エイリアスを使うことができます。

例えば、ある変数や関数の引数が、厳密に「success」「error」「loading」のいずれかの文字列しか持たないという型を型エイリアスで「Status」という名前をつけて作成すると以下のようになります。

type Status = 'success' | 'error' | 'loading';

型エイリアスのStatusを使うには、変数などに「: Status」をつけます。

let currentStatus: Status = 'loading';
currentStatus = 'success'; //OK
currentStatus = 'unknown'; // ※エラー

関数の引数に対して付ける場合は以下のようにします。

function handleStatus(status: Status) {
  // ...
}

プリミティブ型に好きな名前をつける

型エイリアスを使うと、stringやnumberといった基本的な型に、その用途が分かる名前を付けることができます。

例えば、以下のようにすると、UserIdという型エイリアスはstring型になります。

type UserID = string;

使うときは、型エイリアスをつけるだけです。

const userId: UserID = 'u12345';