TypeScript if else

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

TypeScript if文

if文は、条件に基づいて文を実行します。条件が真の場合、if文はその本体内の文を実行します。

if(condition) {
   // if-statement
}Code language: JavaScript (javascript)

例えば、以下の文は、counter変数の値がmax定数の値より小さい場合に、counter変数の値を増やす方法を示しています。

const max = 100;
let counter = 0;

if (counter < max) {
    counter++;
}

console.log(counter); // 1Code language: JavaScript (javascript)

出力

1

この例では、counter変数は0から始まるため、max定数より小さくなります。式counter < maxはtrueと評価されるため、if文はcounter++文を実行します。

counter変数を100に初期化してみましょう。

const max = 100;
let counter = 100;

if (counter < max) {
    counter++;
}

console.log(counter); // 100Code language: JavaScript (javascript)

出力

100

この例では、式counter < maxはfalseと評価されます。if文はcounter++文を実行しません。そのため、出力は100です。

TypeScript if…else文

if文の条件がfalseと評価された場合に他の文を実行したい場合は、if...else文を使用できます。

if(condition) {
   // if-statements
} else {
  // else statements;
}Code language: JavaScript (javascript)

if..else文の使用例を以下に示します。

const max = 100;
let counter = 100;

if (counter < max) {
    counter++;
} else {
    counter = 1;
}

console.log(counter);Code language: JavaScript (javascript)

出力

1

この例では、式counter < maxはfalseと評価されるため、else分岐の文が実行され、counter変数が1にリセットされます。

三項演算子 ?

実際には、単純な条件がある場合は、if...else文ではなく三項演算子?:を使用して、次のようにコードを短くすることができます。

const max = 100;
let counter = 100;

counter < max ? counter++ : counter = 1;

console.log(counter);Code language: JavaScript (javascript)

TypeScript if…else if…else文

複数の条件に基づいてコードを実行したい場合は、if...else if...else文を使用できます。

if…else if…else文には、1つ以上のelse if分岐を持つことができますが、else分岐は1つだけです。

例えば

let discount: number;
let itemCount = 11;

if (itemCount > 0 && itemCount <= 5) {
    discount = 5;  // 5% discount
} else if (itemCount > 5 && itemCount <= 10) {
    discount = 10; // 10% discount 
} else {
    discount = 15; // 15%
}

console.log(`You got ${discount}% discount. `)Code language: JavaScript (javascript)

出力

You got 15% discount. 

この例では、if...else if...else文を使用して、アイテムの数に基づいて割引を決定しています。

アイテム数が5以下の場合、割引は5%です。if分岐の文が実行されます。

アイテム数が10以下の場合、割引は10%です。else if分岐の文が実行されます。

アイテム数が10より大きい場合、割引は15%です。else分岐の文が実行されます。

この例では、アイテム数は常に0より大きいと仮定しています。しかし、アイテム数が0より小さいか10より大きい場合、割引は15%になります。

コードをより堅牢にするには、else分岐の代わりに別のelse ifを使用することができます。

let discount: number;
let itemCount = 11;

if (itemCount > 0 && itemCount <= 5) {
  discount = 5; // 5% discount
} else if (itemCount > 5 && itemCount <= 10) {
  discount = 10; // 10% discount
} else if (itemCount > 10) {
  discount = 15; // 15%
} else {
  throw new Error('The number of items cannot be negative!');
}

console.log(`You got ${discount}% discount. `);
Code language: JavaScript (javascript)

出力

You got 15% discount. 

この例では、アイテム数が10より大きい場合、割引は15%です。2番目のelse if分岐の文が実行されます。

アイテム数が0より小さい場合、else分岐の文が実行されます。

まとめ

• 条件に基づいてコードを実行するには、if文を使用します。
• 条件が偽の場合にコードを実行したい場合は、else分岐を使用します。単純なif…else文の代わりに三項演算子?:を使用するのが良い習慣です。
• 複数の条件に基づいてコードを実行するには、if else if...else文を使用します。