Оператор if else в TypeScript — как использовать

В этом руководстве вы узнаете об операторе TypeScript if...else и его использовании.

if оператор в TypeScript

if выполняет операции на основе условия. Если условие истинно, оператор if выполнит его внутри своего тела:

if(condition) {
   // if-statement
}

Например, следующий оператор иллюстрирует, как использовать if для увеличения переменной counter, если ее значение меньше значения константы max :

const max = 100;
let counter = 0;

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

console.log(counter); // 1

Выход:

1

В этом примере, поскольку переменная counter начинается с нуля, она меньше, чем константа max. Выражение counter < max оценивается как true, поэтому if выполняет оператор counter++.

Давайте инициализируем переменную counter в 100 :

const max = 100;
let counter = 100;

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

console.log(counter); // 100

Выход:

100

В этом примере выражение counter < max оценивается как false. Оператор if не выполняет оператор counter++. Следовательно, выход равен 100.

Оператор TypeScript if…else

Если вы хотите использовать другие операторы, когда условие в операторе if оценивается как false, вы можете использовать оператор if...else :

if(condition) {
   // if-statements
} else {
  // else statements;
}

Ниже показан пример использования if..else :

const max = 100;
let counter = 100;

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

console.log(counter);

Выход:

1

В этом примере выражение counter < max оценивается как false, поэтому выполняется инструкция в ветви else, которая сбрасывает переменную counter в 1.

Тернарный оператор ?:

На практике, если у вас есть простое условие, вы можете использовать тернарный оператор ?: вместо оператора if...else, чтобы сделать код короче:

const max = 100;
let counter = 100;

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

console.log(counter);

Оператор TypeScript if…else if…else

Если вы хотите выполнить код на основе нескольких условий, вы можете использовать if...else if...else.

Оператор if…else if…else может иметь одну или несколько ветвей else if но только одну ветвь else.

Например:

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. `)

Выход:

0

В этом примере используется оператор if...elseif...else для определения скидки на основе количества товаров.

1. Если количество товаров от меньше или равно 5, скидка составляет 5%. Оператор в if выполняется,
2. Если количество товаров меньше или равно 10, скидка составляет 10%. Оператор в else if выполняется.
3. При количестве товаров более 10 скидка составляет 15%. Оператор else выполняется.

В этом примере предполагается, что количество элементов всегда больше нуля. Однако, если количество товаров меньше нуля или больше 10, скидка составляет 15%.

Чтобы сделать код более надежным, вы можете использовать else if вместо else следующим образом:

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 (discount > 10) {
    discount = 15; // 15%
} else {
    throw new Error('The number of items cannot be negative!');
}

console.log(`You got ${discount}% discount. `)

В этом примере скидка составляет 15%, только если количество товаров больше 10. Оператор во второй else if ветке выполняется.

Если количество элементов меньше нуля, выполняется оператор else.

Заключение

• Используйте оператор if в Typescript для выполнения кода на основе условия.
• Используйте else, если вы хотите выполнить код, когда условие ложно. Хорошей практикой является использование тернарного оператора ?: вместо простого оператора if…else.
• Используйте if else if...else для выполнения кода на основе нескольких условий.