ユニオン型の扱い方

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

ユニオン型を扱う際、TypeScriptは重要な安全ルールを適用します。それは、ユニオンに含まれるすべての型に存在するプロパティとメソッドにのみアクセスできるというものです。これにより実行時エラーを防ぐことができますが、型固有の機能にアクセスするには特別な手法が必要になることを意味します。

文字列または文字列の配列のいずれかを受け取る関数を考えてみましょう。どちらの型も length プロパティを持っているため、安全にアクセスできます：

function getLength(input: string | string[]): number {
  return input.length; // 安全 - どちらの型も length を持っています
}

しかし、一方の型にしか存在しないメソッドを使用しようとすると、TypeScriptはエラーを表示します。型固有のメンバーに安全にアクセスするには、型ガード（type guard）（型を絞り込むための実行時チェック）が必要です：

function processInput(input: string | string[]): void {
  if (typeof input === "string") {
    // ここでTypeScriptはinputがstringであることを認識します
    console.log(input.toUpperCase());
  } else {
    // ここでTypeScriptはinputがstring[]であることを認識します
    console.log(input.join(", "));
  }
}

typeof 演算子は、最も一般的な型ガードの1つです。チェックの後、TypeScript は各分岐内で自動的に型を絞り込み、完全な型安全性を維持しながら、型固有のプロパティやメソッドへの完全なアクセスを可能にします。

チャレンジ

簡単

string | string[] 型の input という名前のパラメータを受け取り、number を返す processData という名前の関数を作成してください。この関数は、型ガードを使用して入力型を判別し、次のように動作する必要があります。

入力が string の場合、その長さを返します
入力が string[] の場合、配列内のすべての文字列の合計文字数を返します

number | boolean 型の content という名前のパラメータを受け取り、string を返す formatMessage という名前の別の関数を作成してください。この関数は、型ガードを使用して入力型を判別し、次のように動作する必要があります。

入力が number の場合、"Value: [number]" を返します
入力が boolean の場合、"Status: [boolean]" を返します

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

最初の入力：単一の単語、または ["apple", "banana", "cherry"] のような文字列の JSON 配列を表す文字列
2番目の入力：数値または真偽値（"true" または "false"）を表す文字列

入力を次のように処理してください：

最初の入力について："[" で始まる場合は、文字列の JSON 配列としてパースします。そうでない場合は、単一の文字列として扱います。
2番目の入力について："true" または "false" の場合は、真偽値に変換します。そうでない場合は、数値に変換します。

処理された最初の入力で processData を呼び出し、結果を出力します。次に、処理された2番目の入力で formatMessage を呼び出し、結果を出力します。

自分で試してみよう

import * as fs from "fs";

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

// TODO: ここにコードを記述してください
// 型ガードを使用して processData 関数を作成します
// 型ガードを使用して formatMessage 関数を作成します
// 要件に従って入力を処理します
// 関数を呼び出し、結果を出力します