TypeScript switch case

概要: このチュートリアルでは、TypeScriptのswitch...case文について学びます。

TypeScript switch case文の紹介

以下にswitch...case文の構文を示します。

switch ( expression ) {
   case value1:
       // statement 1
       break;
   case value2:
       // statement 2
       break;
   case valueN:
       // statement N
       break;
   default: 
       // 
       break;
}Code language: JavaScript (javascript)

動作原理

まず、switch...case文はexpression(式) を評価します。

次に、その値(value1、value2、…valueN)と等しい値を持つcase節を最初に検索します。

switch...case文は、値が一致する最初のcase節の文を実行します。

一致するcase節が見つからない場合、switch...case文はオプションのdefault節を探します。default節があれば、その節の文を実行します。

各case節に関連付けられたbreak文は、case節内の文の実行が完了すると、switch...case文から制御が抜けることを保証します。

一致するcase節にbreak文がない場合、プログラムの実行はswitch...case文の次の文から継続されます。

慣例として、default節はswitch...case文の最後の節です。ただし、必ずしもそうである必要はありません。

TypeScript switch case文の例

switch...case文の使用例をいくつか見てみましょう。

1) シンプルなTypeScript switch caseの例

次の例は、ターゲットIDに基づいてメッセージを表示するシンプルなswitch...caseの例を示しています。

let targetId = 'btnDelete';

switch (targetId) {
    case 'btnUpdate':
        console.log('Update');
        break;
    case 'btnDelete':
        console.log('Delete');
        break;
    case 'btnNew':
        console.log('New');
        break;
}Code language: JavaScript (javascript)

出力

Delete

この例では、targetIdはbtnDeleteに設定されています。

switch...case文は、targetIdと値のリストを比較します。targetIdが'btnDelete'と一致するため、対応するcase節の文が実行されます。

2) caseのグループ化の例

複数のcaseで共有されるコードがある場合は、それらをグループ化できます。例えば

// change the month and year
let month = 2,
    year = 2020;

let day = 0;
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        day = 31;
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        day = 30;
        break;
    case 2:
        // leap year
        if (((year % 4 == 0) &&
            !(year % 100 == 0))
            || (year % 400 == 0))
            day = 29;
        else
            day = 28;
        break;
    default:
        throw Error('Invalid month');
}

console.log(`The month ${month} in ${year} has ${day} days`);Code language: JavaScript (javascript)

出力

The month 2 in 2020 has 29 days

この例は、特定の月と年の日数を返します。

月が1、3、5、7、8、または12の場合、日数は31日です。月が4、6、9、または11の場合、日数は30日です。

月が2で、年が閏年の場合、29日、そうでなければ28日になります。