TypeScript - ユニオン型：初級者向けのやさしい導入

こんにちは、将来のプログラミングスーパースター！? TypeScriptの素晴らしい世界に飛び込み、その最も強力な機能の1つを学ぶ準備はできていますか？今日は、初めて聞くと少し怖いように思えるかもしれないが、このチュートリアルの終わりまでに非常に役立つものであることが分かるユニオン型について探求します！

TypeScript - Union

近所の親切なコンピュータ教師として、この概念を理解したときに無数の生徒が目を輝かせたのを見てきました。それでは、一緒にこの旅に出かけましょうか？

ユニオン型とは？

まず、簡単な類似点から始めましょう。あなたが、おもちゃの車またはぬいぐるみを一度に保持できる魔法の箱を持っていると想像してください。しかし、両方を同時に保持することはできません。TypeScriptにおけるユニオン型もそんな感じです。これは、変数が複数の型のいずれかであることをコードに伝える方法です。

それでは、コードを少し弄ってみましょう！

文法：ユニオンリテラル

ユニオン型の基本構文は、パイプシンボル(|)を使って異なる型を区切ります。まるでTypeScriptに「これはこれかあれのいずれかだよ！」と伝えるようなものです。

let myFavorite: string | number;

myFavorite = "TypeScript"; // これは有効
console.log(myFavorite); // 出力: TypeScript

myFavorite = 42; // これはも有効
console.log(myFavorite); // 出力: 42

// myFavorite = true; // これはエラーを引き起こします

この例では、myFavoriteは文字列または数値のいずれかです。魔法の箱が単語または数値を保持できるが、他のものは保持できないのと同じです。ブール値（例えばtrue）を入れる試みをすると、TypeScriptは魔法の杖を振ってエラーを表示します。

ユニオン型変数

前の例を拡張して、ユニオン型がどのようにコードをより柔軟にするかを見てみましょう。

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // これは有効
console.log(`I have a ${myPet}`); // 出力: I have a cat

myPet = "dog"; // これはも有効
console.log(`I have a ${myPet}`); // 出力: I have a dog

// myPet = "elephant"; // これはエラーを引き起こします

ここでは、Petというカスタム型を作成し、それが3つの特定の文字列のいずれかであることを指定しています。ペットショップが猫、犬、魚のみを売っているようなものです。象を買おうとすると、ごめんなさい、できません！

ユニオン型と関数パラメータ

ユニオン型が関数と一緒に使われると、非常に強力になります。型安全性を失うことなく、関数をより多様にすることができます。例を見てみましょう。

function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}

printId(101); // 出力: Your ID is: 101
printId("202"); // 出力: Your ID is: 202

// printId(true); // これはエラーを引き起こします

この関数では、printIdは数値または文字列のいずれかを受け取ります。ユニバーサルIDカードリーダーのように、数値およびテキストベースのIDを処理できますが、ブール値のIDカードを試みると、丁寧に拒否されます！

ユニオン型と配列

今度はレベルアップして、ユニオン型が配列とどのように動作するかを見てみましょう。配列の魔法に身をまかせて！

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // 出力: [1, "two", 3, "four", 5]

mixedArray.push(6); // これは有効
mixedArray.push("seven"); // これはも有効

// mixedArray.push(true); // これはエラーを引き起こします

console.log(mixedArray); // 出力: [1, "two", 3, "four", 5, 6, "seven"]

ここでは、数値および文字列の両方を含む配列を作成しています。トラック番号と曲タイトルを含むプレイリストのようなものです。しかし、ブール値を忍び込ませようとすると、TypeScriptはあなたを捕まえます！

実用的な使用例

基本をカバーしたので、ユニオン型が役立つ実際のシナリオを見てみましょう。

API レスポンス: APIとやり取りする際、受け取るデータが異なる型であることがあります。ユニオン型はこれらの変動をスムーズに処理するのに役立ちます。

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`Success! Data: ${response.data}`);
} else {
console.log("An error occurred");
}
}

handleResponse({ status: "success", data: "User profile loaded" });
handleResponse({ status: "error", data: null });

設定オプション: 設定可能な関数を作成する際、ユニオン型は有効なオプションを提供するのに役立ちます。

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`Creating a ${color} button of size ${size}`);
}

createButton("red", "medium"); // 有効
// createButton("yellow", "extra-large"); // これはエラーを引き起こします

ユニオン型の一般的なメソッド

以下は、ユニオン型で使用できる一般的なメソッドの表です：

メソッド	説明	例
typeof	値の型をチェック	`typeof x === "string"`
instanceof	オブジェクトが特定のクラスのインスタンスかをチェック	`x instanceof Date`
in	オブジェクトにプロパティが存在するかをチェック	`"name" in x`
Array.isArray()	値が配列かをチェック	`Array.isArray(x)`

結論

今日は多くのことをカバーしましたね？ユニオン型は最初は少し難しいように思えるかもしれませんが、TypeScriptのツールキットにおける非常に強力なツールです。より柔軟で頑強なコードを書くことができ、潜在的なエラーを未然に防ぐことができます。

コードを書くことは新しい言語を学ぶのと同じです。練習と忍耐が必要です。すぐには理解できない場合でも、実験を続け、コードを書き続けると、すぐにユニオン型をプロのように使用できるようになるでしょう！

最後に、ある生徒が私に言った言葉を思い出します。「ユニオン型は私のコードのスイスアーミー Knifeだ！」そして、彼らは完全に正しかったです。それでは、若いコーダー、ユニオン型を武器にして進む勇気を！??

Credits: Image by storyset