【初心者向け】TypeScript ユニオン型 - 基本から応用まで徹底解説
TypeScriptにおけるユニオン型のすべての可能なキーを理解する
そこで今回は、TypeScriptにおけるユニオン型のすべての可能なキーを理解するための包括的なガイドを提供します。
型定義の確認
まず、分析対象のユニオン型の定義を確認する必要があります。型定義には、構成する各オブジェクト型とそのプロパティが記載されています。
type UserOrAdmin = {
name: string;
age: number;
} | {
name: string;
email: string;
role: string;
};
この例では、UserOrAdmin 型は、User 型と Admin 型のユニオン型です。
共通プロパティの特定
ユニオン型に属するすべてのオブジェクト型が共有するプロパティは、すべての可能なキーとなります。上記の例では、name プロパティは User 型と Admin 型で共通なので、UserOrAdmin 型のすべての可能なキーとなります。
const userOrAdmin: UserOrAdmin = {
name: "John Doe",
// age または email と role のどちらか一方のみ存在
};
型ガードによる絞り込み
ユニオン型の中には、判別型と呼ばれる、各オブジェクト型を区別するためのプロパティを持つものがあります。判別型を用いることで、条件分岐を行い、特定のオブジェクト型に属するキーのみを抽出することができます。
type UploadStatus = "pending" | "success" | "failure";
function getStatusDetails(status: UploadStatus): string {
switch (status) {
case "pending":
return "アップロード中";
case "success":
return "アップロード完了";
case "failure":
return "アップロード失敗";
}
}
この例では、UploadStatus 型は "pending", "success", "failure" のいずれかの値を持つ判別型です。getStatusDetails 関数では、status の値に基づいて、それぞれのステータスに対応したメッセージを返します。
高度な型操作ライブラリの活用
keyof 演算子や Pick 型、Exclude 型などの高度な型操作ライブラリを活用することで、より複雑なユニオン型のすべての可能なキーを抽出することができます。
詳細は、以下の資料を参考にしてください。
まとめ
TypeScriptにおけるユニオン型のすべての可能なキーを理解することは、型システムを最大限に活用し、安全で堅牢なコードを書くために不可欠です。今回紹介した方法を参考に、それぞれの状況に応じて適切なアプローチを選択してください。
共通プロパティの抽出
type UserOrAdmin = {
name: string;
age?: number; // オプション
} | {
name: string;
email: string;
role: string;
};
function printCommonProperties(userOrAdmin: UserOrAdmin) {
console.log(userOrAdmin.name); // name プロパティは常に存在
if (userOrAdmin.age) {
console.log(userOrAdmin.age); // age プロパティはオプション
}
}
判別型を用いた絞り込み
type UploadStatus = "pending" | "success" | "failure";
function handleUploadStatus(status: UploadStatus) {
switch (status) {
case "pending":
console.log("アップロード中...");
break;
case "success":
console.log("アップロード完了！");
break;
case "failure":
console.error("アップロード失敗！");
break;
}
}
高度な型操作ライブラリの活用
type Product = {
id: number;
name: string;
price: number;
stock: number;
};
type DiscountedProduct = Product & {
discount: number;
};
function getAvailableProductKeys(product: Product | DiscountedProduct): (keyof Product | keyof DiscountedProduct)[] {
return [...Object.keys(product)]; // keyof 演算子で抽出
}
const productOrDiscountedProduct: Product | DiscountedProduct = {
id: 1,
name: "T-Shirt",
price: 1000,
stock: 10,
// discount プロパティはオプション
};
const availableKeys = getAvailableProductKeys(productOrDiscountedProduct);
console.log(availableKeys); // ["id", "name", "price", "stock", "discount"]
これらの例は、ユニオン型のすべての可能なキーを理解するためのほんの一例です。実際の開発においては、より複雑な型構造を扱うことも多くなりますが、今回紹介した基本的な概念を理解することで、さまざまな状況に対応できるようになります。
その他のユニオン型のすべての可能なキーを取得する方法
型ガードの組み合わせ
複数の型ガードを組み合わせることで、より複雑な条件に基づいてキーを絞り込むことができます。
type UserOrAdmin = {
name: string;
age?: number;
email?: string;
role?: string;
};
function isAdmin(userOrAdmin: UserOrAdmin): userOrAdmin is { role: string } {
return typeof userOrAdmin.role === "string";
}
function printAdminDetails(userOrAdmin: UserOrAdmin) {
if (isAdmin(userOrAdmin)) {
console.log(userOrAdmin.name);
console.log(userOrAdmin.role);
}
}
ジェネリック型による再帰
ジェネリック型を用いて、再帰的にユニオン型のすべての可能なキーを抽出するコードを書くことができます。
type UnionToIntersection<U> = (
& {[K in keyof U]: (u: U) => Pick<U, K>[K]}
)[U] extends infer I ? I : never;
type GetAllKeys<T> = UnionToIntersection<T extends object ? T : never>;
type UserOrAdminKeys = GetAllKeys<UserOrAdmin>; // "name" | "age" | "email" | "role"
サードパーティ製ライブラリの利用
ts-nameof や @types/utility-types などのサードパーティ製ライブラリの中には、ユニオン型のすべての可能なキーを取得するためのユーティリティ関数を提供するものがあります。
import { Keys } from "ts-nameof";
type UserOrAdminKeys = Keys<UserOrAdmin>; // "name" | "age" | "email" | "role"
これらの方法は、それぞれ異なる利点と欠点があります。状況に応じて適切な方法を選択することが重要です。
typescript
