前回の記事では TypeScriptの配列型 を解説しました。
配列型では
- number[]
- string[]
- User[]
などのデータ構造を安全に扱う方法を説明しました。
今回は Union型とLiteral型 を解説します。
Union型はTypeScriptの中でも非常に重要な型機能で、実務でも頻繁に使われます。
この記事では次の内容を解説します。
- Union型とは
- Union型の使い方
- Literal型
- 実務での利用例
Union型とは
Union型とは
複数の型を許可する型です。
通常のTypeScriptの型は
let id: numberのように 1つの型しか許可しません。
Union型を使うと
let id: string | numberのように書くことができます。
この場合
id = "abc"
id = 100どちらも許可されます。
Union型の基本例
例
let value: string | number
value = "hello"
value = 10これは
string
または
numberという意味になります。
Union型のメリット
Union型を使うメリットは次の通りです。
柔軟な型設計
複数のデータ形式を扱えます。
APIレスポンスに対応
APIでは次のようなケースがあります。
成功 → データ
失敗 → エラーメッセージUnion型で表現できます。
Union型の型チェック
Union型を使う場合、型チェックを行うことがあります。
例
function print(value: string | number) {
if (typeof value === "string") {
console.log(value.toUpperCase())
} else {
console.log(value.toFixed(2))
}
}このコードでは
typeofを使って型を判定しています。
Literal型とは
Literal型とは
特定の値だけ許可する型です。
例
let direction: "left" | "right"この場合
direction = "left"
direction = "right"はOKですが
direction = "up"はエラーになります。
Literal型のメリット
Literal型は
決まった値しか使えないデータに便利です。
例
type Theme = "light" | "dark"状態管理の例
Reactなどでは次のように使います。
type Status = "loading" | "success" | "error"この型を使うと
let status: Statusは
3つの値しか使えません。
APIレスポンス例
Union型はAPIレスポンスでも使えます。
例
type ApiResult =
| { success: true; data: string }
| { success: false; error: string }このように書くことで
成功レスポンス
失敗レスポンスを安全に扱えます。
Union型 + オブジェクト
Union型はオブジェクトと組み合わせると強力です。
例
type User =
| { role: "admin"; accessLevel: number }
| { role: "user"; subscription: string }この場合
roleによってデータ構造が変わります。
Union型と型推論
TypeScriptはUnion型でも型推論を行います。
例
let value: string | number = 10この場合
numberとして扱われます。
実務での利用例
Union型は次のような場面で使われます。
APIレスポンス
成功 / エラー
UI状態
loading
success
error設定値
dark
lightUnion型を使うメリット
Union型のメリット
- 柔軟な型設計
- バグ防止
- コードの意味が明確
まとめ
この記事では TypeScriptのUnion型とLiteral型 を解説しました。
重要なポイント
- Union型は複数の型を許可する
|で定義する- Literal型は特定の値だけ許可
- APIや状態管理でよく使う
Union型はTypeScriptの型設計で非常に重要な機能です。
次の記事
次回は
InterfaceとTypeの違い
を解説します。
TypeScriptでは
interface
typeの2つの方法で型定義ができます。
それぞれの違いと使い分けを解説します。
コメント