TypeScript switch文のサンプル

目次

switch文の構文

switch (式) {
  case 値1:
    // 式が値1と一致する場合の処理
    break;

  case 値2:
    // 式が値2と一致する場合の処理
    break;

  default:
    // どのcaseにも一致しないときの処理
    break;
}

TypeScriptの switch 文は、複数の条件を分岐処理するための制御構文で、基本的にはJavaScriptと同じ構文ですが、TypeScriptでは型安全に使えるという利点があります。

 

数値による分岐

let score: number = 80;

switch (true) {
  case score >= 90:
    console.log("優秀");
    break;
  case score >= 70:
    console.log("合格"); // 出力される
    break;
  default:
    console.log("不合格");
    break;
}

TypeScriptでは数値の範囲(score >= 90 など)を判定したい場合、switch(true) を使うのが1つのテクニックです。
値がない、またはnullのときは、10行目のdefaultになります。

 

文字列で分岐

let color: string = "blue";

switch (color) {
  case "red":
    console.log("赤です");
    break;
  case "blue":
    console.log("青です"); // 出力される 
    break;
  default:
    console.log("他の色です");
    break;
}

 

enumとの組み合わせ

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let dir: Direction = Direction.Left;

switch (dir) {
  case Direction.Up:
    console.log("上");
    break;
  case Direction.Down:
    console.log("下");
    break;
  case Direction.Left:
    console.log("左"); // 出力される
    break;
  case Direction.Right:
    console.log("右");
    break;
}

 

breakがない場合(フォールスルー)

"use strict";
const a = "1";

switch (a) {
    case "1":
        console.log("test1"); // test1が出力される

    case "2":
        console.log("test2"); // test2が出力される
        break;
    default:
        console.log("test3");
}

7行目は、breakがありません。
5行目のcase "1"の処理の後、8行目のcase"2"の処理も実行されます。

point

フォールスルー(fall through/落ちる)と呼ばれます。
breakを書き忘れたのかわかりづらいので使用しないほうが良いです。

 

switch文の中でif文を使用する

const a = 3;

switch (a) {
  case 3:
    if (a % 2 == 0) {
      console.log("even");
    } else {
      console.log("odd"); // oddが出力される
    }
    break;
  default:
    console.log("other");
}

5行目はswitch文の中のcaseの後にif文を使用しています。
%は、割り算の余りを求めます。

point

switch文の中にif文を使用することは可能です。

関連の記事

TypeScript if文 条件分岐を行うサンプル

△上に戻る