ユニオン型 ('|')

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 31/73。

状況に応じて、異なる型の値を保持できる変数が必要になることがあります。例えば、ユーザーIDは "user123" のような文字列、または 42 のような数値のいずれかとして保存されるかもしれません。TypeScriptの ユニオン型 は、変数が指定された複数の型のうちの1つになれるようにすることで、この問題を解決します。

ユニオン型は、パイプ記号 (|) を使用して複数の型を組み合わせます。この構文は、自然に「これ、またはあれ」と読み取れます：

let userId: string | number;

userId = "user123";  // 有効 - string
userId = 42;         // 有効 - number
userId = true;       // エラー - booleanは許可されていません

ユニオン型では、プリミティブだけでなく、あらゆる型を組み合わせることができます。この柔軟性により、ユニオン型は複数の入力形式を受け入れる必要がある関数のパラメータにおいて特に有用です：

function displayMessage(content: string | number): void {
  console.log("Message: " + content);
}

displayMessage("Hello!");  // string型で動作します
displayMessage(404);       // number型で動作します

ユニオン型は、柔軟性を維持しながら型の安全性を提供します。TypeScriptは、指定された型のいずれかに一致する値のみを使用することを保証し、予期しないデータ型によるランタイムエラーを防ぎます。

チャレンジ

簡単

string | number 型の id という名前のパラメータを受け取り、それをコンソールに出力する printId という名前の関数を作成してください。この関数は、明示的な戻り値の型として void を持つ必要があります。

boolean | string 型の data という名前のパラメータを受け取り、それをそのまま返す processValue という名前の別の関数を作成してください。この関数は、明示的な戻り値の型として boolean | string を持つ必要があります。

number | string 型の input という名前のパラメータを受け取り、フォーマットされた文字列を返す formatOutput という名前の3つ目の関数を作成してください。入力が数値の場合は、"Number: [input]" を返します。入力が文字列の場合は、"Text: [input]" を返します。この関数は、明示的な戻り値の型として string を持つ必要があります。

以下の入力が提供されます：

1番目の入力：文字列または数値のいずれかになり得る値（printId 用）
2番目の入力：真偽値または文字列のいずれかになり得る値（processValue 用）
3番目の入力：数値または文字列のいずれかになり得る値（formatOutput 用）

3つの入力を読み取り、適切な入力を使用して各関数を呼び出し、次のように出力を処理してください：

1番目の入力を使用して printId を呼び出します（これは直接出力されます）
2番目の入力を使用して processValue を呼び出し、返された値を出力します
3番目の入力を使用して formatOutput を呼び出し、返された値を出力します

注意：1番目の入力は文字列として提供されますが、それが数値（"123" など）を表す場合は、printId に渡す前に数値に変換してください。2番目の入力は文字列として提供されますが、それが "true" または "false" の場合は、対応する真偽値に変換してください。3番目の入力は文字列として提供されますが、それが数値を表す場合は、数値に変換してください。

自分で試してみよう

import * as fs from "fs";

// 入力を読み込む
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const input1 = inputs[0];
const input2 = inputs[1];
const input3 = inputs[2];

// 入力を適切な型に変換する
const firstInput = isNaN(Number(input1)) ? input1 : Number(input1);
const secondInput = input2 === "true" ? true : input2 === "false" ? false : input2;
const thirdInput = isNaN(Number(input3)) ? input3 : Number(input3);

// TODO: ここにコードを記述してください
// 3つの関数（printId、processValue、formatOutput）を作成してください

// TODO: 適切な入力を使用して関数を呼び出し、出力を処理してください