【TypeScript】条件分岐

目次

はじめに

この記事では、TypeScriptにおける条件分岐について解説します。

if-else

TypeScriptにおけるif-else文は以下のように記載します。

if (score === 0) {
    // scoreが0の場合の処理
} else {
    // scoreが0以外の場合の処理
}

else if文も使用できます。

if (score === 100) {
    // scoreが100の場合の処理
} else if (score === 50){
    // scoreが50の場合の処理
} else {
    // scoreが100もしくは50以外の場合の処理
}

TypeScriptのif-elseは文です。

式ではないので、以下のように条件分岐を変数に代入することはできません。

(Kotlinだとできますが、TypeScriptはできません)

const result = if (score > 100) "OK" else "NG";

上記のように、式で書きたい場合は三項演算子を用います。

const result = score > 100 ? "OK" : "NG";

三項演算子が分からない方は以下をご覧ください。

上記をif-else文で書くと以下のようになります。

let result;
if (score > 0) {
    result = "OK";
} else {
    result = "NG";
}

switch

TypeScriptではswitch文でも条件分岐を行うことができます。

const language = "TypeScript";
switch (language) {
    case "TypeScript":
        console.log("TypeScript");
        break;
    case "JavaScript":
        console.log("JavaScript");
        break;
    default:
        console.log("その他の言語");   

case文は連続して書くこともできます。

const language = "TypeScript";
switch (language) {
    case "TypeScript":
    case "JavaScript":
        console.log("TypeScript or JavaScriptです");
        break;
    case "Python":
    case "Java":
        console.log("Python or Javaです");
        break;
    default:
        console.log("その他の言語");
        break;

switchは厳密等価演算

switch文では、値の比較に使用されるのは等価演算(==)ではなく、厳密等価演算(===)になります。

例えば、nullundefinedは等価演算では等しいとされますが厳密等価演算では等しくありません。

switchのフォールスルー問題

TypeScriptのswitch文のcase文には、分岐を抜けさせる働きがありません。

分岐を抜けるには、breakが必要です。breakを書かない場合、次の分岐も実行されます。

上記の挙動をフォールスルーと言います。

例えば以下のような場合、”TypeScript”と”JavaScript”が出力されてしまいます。

let language = "TypeScript";
switch (language) {
    case "TypeScript":
        console.log("TypeScript");
    case "JavaScript":
        console.log("JavaScript");
}

フォールスルーはバグの原因になりかねます。基本的には全てのcase文(default文も)にbreak文をつけましょう。

TypeScriptではコンパイラオプションnoFallthroughCasesInSwitchtrueにすると、フォールスルーを警告するようになります。

このオプションは有効化すると良いでしょう。

caseの変数スコープ

TypeScriptのcase文には基本的に変数のスコープがありません。

以下のような場合コンパイルエラーとなります。

let language = "TypeScript";
switch (language) {
    case "TypeScript":
        const name = "TypeScript";
        // Cannot redeclare block-scoped variable 'name'.
        break;
    case "JavaScript":
        const name = "JavaScript";
        // Cannot redeclare block-scoped variable 'name'.
        break;
}

上記を回避する方法はあります。

case文に変数スコープを作るには、「{ }」でcase節を囲みます。

let language = "TypeScript";
switch (language) {
    case "TypeScript": {
        const name = "TypeScript";
        // Cannot redeclare block-scoped variable 'name'.
        break;
    }
    case "JavaScript": {
        const name = "JavaScript";
        // Cannot redeclare block-scoped variable 'name'.
        break;
    }
}

まとめ

この記事ではTypeScriptにおける条件分岐について解説しました。

是非、いいねやコメントをお願いします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次