TypeScriptの型エイリアス（type）とは？初心者でもわかる使い方と活用例
生徒
「TypeScriptで似たような型を何回も書くのが大変です。もっと簡単にできる方法ってありますか？」
先生
「それなら、型エイリアス（type）を使うのがおすすめです。同じ型を何度も書かなくても、名前をつけて再利用できるんです。」
生徒
「型に名前をつけるってどういうことですか？」
先生
「実際にコードで見てみましょう！とてもシンプルですよ。」
1. 型エイリアス（type）とは？
TypeScript（タイプスクリプト）では、型エイリアスという機能を使って、複雑な型や長い型定義に「短い名前」をつけて再利用できます。typeというキーワードで、まるで「あだ名」をつけるように別名を与えるイメージです。毎回同じ型を書かずに済むので、コードの見通しが良くなり、修正も一か所で完結します（DRYな書き方）。
たとえば「名前」と「年齢」をまとめた情報をアプリのあちこちで使う場合、毎回同じ形を繰り返すのは面倒でミスの原因になります。そこで一度だけ型に名前をつけておけば、その名前を書く だけ で同じ意味を表せます。型エイリアスは実行時の動きには影響せず、開発中に型チェックを強くしてくれる存在だと考えてください。
type Person = {
name: string;
age: number;
};
// 以後は「Person」と書くだけで同じ形を表せる
const member: Person = { name: "はるか", age: 20 };
このように、長い型に分かりやすい名前を与えるだけで、読みやすさ・保守性・誤入力の防止がいっきに向上します。まずは「よく登場する形」に落ち着いた名前をつけるところから始めてみましょう。
2. 基本的な型エイリアスの使い方
まずは「よく使う形」に名前をつけるところから始めます。手順はかんたんで、type の後ろに名前を書き、= で本来の型を結びつけるだけです。以後は、その名前を書けば同じ意味になります。毎回長い型を書く必要がなくなるので、ミスが減り読みやすさが上がります。
type User = {
name: string;
age: number;
};
// 以後は「User」と書くだけでOK
const user1: User = { name: "たろう", age: 25 };
const user2: User = { name: "はなこ", age: 19 };
// 関数の引数にも同じ名前を使い回せる
function showUser(u: User): void {
console.log(`${u.name}（${u.age}）`);
}
showUser(user1);
ポイントは「一度だけ定義して、あとは名前で再利用」できることです。もし構造を変えたくなっても、User の定義を一か所直すだけで、関連するコードに一括で反映されます。命名は名詞・先頭大文字（例：Order、Profile）にすると読みやすくなります。
3. 型エイリアスのメリットとは？
- 繰り返し使える：同じ型定義を何回も書かなくてすむ
- 見やすい：コードが短くなって、読みやすくなる
- 意味が伝わる：型に名前をつけることで、そのデータが何を表しているか分かりやすくなる
たとえば、下のように何度も同じ型を書くとミスも増えやすくなります。
let userA: { name: string; age: number } = { name: "A", age: 30 };
let userB: { name: string; age: number } = { name: "B", age: 40 };
このようなケースでは、先ほどのUser型を使うことで、コードをすっきりさせることができます。
4. 配列との組み合わせもできる
型エイリアスは、配列にも使えます。たとえば、ユーザーの一覧を表すときにも便利です。
type User = {
name: string;
age: number;
};
let userList: User[] = [
{ name: "さくら", age: 22 },
{ name: "じろう", age: 28 }
];
User[]は、「User型の配列」という意味です。複数のユーザー情報をまとめて扱うことができます。
5. 基本の型にもエイリアスを使える
型エイリアスは、オブジェクトだけでなく、数値や文字列などの基本的な型にも使えます。
type UserId = number;
type UserName = string;
let id: UserId = 101;
let name: UserName = "ゆうた";
このように基本型に意味を持たせることで、コードの意図が明確になります。たとえばUserIdと書かれていれば、「これはユーザーのIDなんだな」と分かります。
6. 他の型を組み合わせた応用例
型エイリアスは、他の型と組み合わせて作ることも可能です。たとえば、ログイン状態を表す型を作ってみましょう。
type User = {
name: string;
age: number;
};
type LoginStatus = "ログイン中" | "ログアウト中";
type LoginUser = {
user: User;
status: LoginStatus;
};
let currentUser: LoginUser = {
user: {
name: "まこと",
age: 35
},
status: "ログイン中"
};
このようにUser型とLoginStatus型を組み合わせることで、より現実的なデータの構造を表現できます。
7. 型エイリアスはこんなときに便利！
型エイリアスが特に便利なのは、次のようなときです。
- データの構造が長くて複雑なとき
- 同じ型を何度も使いたいとき
- 他の人にも分かりやすいコードを書きたいとき
名前をつけることで、コード全体の読みやすさ・メンテナンスのしやすさが格段に上がります。
まとめ
ここまで、TypeScriptで使われる型エイリアスについて、たくさんの例といっしょにゆっくり確認してきました。型エイリアスは、ただ短く書けるだけではなく、長い型定義に名前をつけて分かりやすく整理したり、複雑なデータ構造をひとまとめに扱いやすくしたりするための、とても便利な仕組みでした。とくに色々な値やデータを扱うアプリやWebサービスでは、同じ形のデータを何度も書き直すことがよくあります。そのたびに細かい書き間違いが起こったり、修正箇所を探すのに時間がかかったりしますが、型エイリアスがあれば、名前を書くだけで正しい形のデータをそろえることができます。
大きなプロジェクトになればなるほど、コードの読みやすさや変更のしやすさがとても大切になります。型エイリアスがあれば、「これは何のデータなのか」「何を表している値なのか」がひと目で理解でき、ほかの人が読んでも間違えにくい形になります。たとえばユーザー情報を表す型にUserという名前をつけることで、名前と年齢を持った人を示すデータなのだと直感的に判断できますし、ログイン中のユーザーを表す型ならLoginUserというように、意味を伝えるための名前を自由につけることができます。
さらに、配列との組み合わせや、基本型への別名、文字列リテラル型との組み合わせなど、型エイリアスは柔軟な使い方ができます。オブジェクトばかりではなく、数値に名前をつけたり、複数の型をつなげて新しい型を作り出したりと、実際の開発で役に立つ場面が多くあります。書き方も難しくなく、typeというキーワードのあとに好きな名前を定義するだけです。最初は小さなところから取り入れて、少しずつ慣れていくと自然に使いこなせるようになります。
サンプルコードでおさらい
もう一度、型エイリアスが役立つ例を確認してみます。長いデータ構造を毎回書くと見づらくなるので、名前をつけて整理する方法です。
type Address = {
city: string;
postal: string;
phone: string;
};
type User = {
name: string;
age: number;
address: Address;
};
let member: User = {
name: "たける",
age: 32,
address: {
city: "東京",
postal: "123-4567",
phone: "090-0000-1111"
}
};
このように、さらっと読むだけでどんな情報を持った人なのかが理解しやすくなります。型がひと目で分かるので間違いが少なくなり、コード全体が自然と整理されていきます。複雑なアプリを作るときほど、型エイリアスの効果を実感できるはずです。
もし、途中で仕様が変わって住所情報に「建物名」や「都道府県」などを追加したい場合でも、Addressの定義だけを変えれば、ほかのコードをいじらずに済みます。こうした拡張のしやすさは、型エイリアスならではの強みです。今後、フォーム入力やユーザー管理、ログイン管理などを作るときにも、同じ考え方で再利用できるようになります。
生徒
「最初はただ短くするだけの機能かと思っていました。でも、データの形をひとまとめにできて、意味も伝わりやすくなるところがすごいですね。」
先生
「その通りです。読みやすさも大事ですが、あとから修正が必要になったときに一か所だけ変えればよい点がとても大きいですよ。」
生徒
「型同士を組み合わせられるのも面白いです。UserとLoginStatusをつないだLoginUserみたいに、現実のデータに近い形を作れるのが便利ですね。」
先生
「複雑になればなるほど、型エイリアスのありがたさがよく分かります。アプリ開発を続けていくと、自然に使いこなせるようになりますよ。」
生徒
「次のコードでも使ってみます。長い型を書き直すより、名前がひとつあるだけでとても楽になりそうです。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
TypeScriptの型エイリアスとインターフェースの違いは何ですか？どちらを使えば良いのか分かりません。
TypeScriptでは型エイリアスとインターフェースが似た役割を持ちますが、型エイリアスはオブジェクトだけでなく、文字列や数値の型にも別名をつけられるため、幅広い場面で使えます。インターフェースはオブジェクト構造を定義する目的で使われることが多いです。コードの表現力や柔軟性を重視したいときは型エイリアスを使う場面が増えます。「User」や「LoginUser」のように複雑なデータをまとめたいときにも便利です。
理解度のクイズ問題
空欄の★に当てはまる内容を答えてください。
type User = { name: string; age: number; }; let members: User[] = [ { name: "Ken", age: 18 }, { name: "Aya", age: 22 } ]; let leaders: User[] = [ { name: "Taro", age: 30 } ];
