Условные операторные конструкции в TypeScript

В этой статье мы объясним условные конструкции в TypeScript.

YouTube Video

Операторы if в TypeScript

В TypeScript оператор if выполняет ветвление, которое выполняет код, если указанное условие имеет значение true, и не выполняет его, если условие имеет значение false. Оператор if имеет тот же синтаксис, что и в JavaScript, и использует типовою безопасность TypeScript для выполнения условного ветвления.

Базовый синтаксис

Основной синтаксис оператора if выглядит следующим образом.

1if (condition) {
2    // Code to execute if the condition is true
3} else if (anotherCondition) {
4    // Code to execute if the first condition is false
5    // and the another condition is true
6} else {
7    // Code to execute if all conditions are false
8}

• Если condition равно true, будет выполнен код в следующем блоке.
• Если condition равно false, а anotherCondition равно true, будет выполнен код в следующем блоке.
• Если ни одно условие не равно true, будет выполнен код в последнем блоке else.

Пример 1: Базовый оператор if-else

В следующем примере проверяется, равно ли значение переменной x 10 или больше, и выводится результат.

1let x: number = 15;
2
3if (x >= 10) {
4    console.log("x is 10 or greater");
5} else {
6    console.log("x is less than 10");
7}
8// Outputs: x is 10 or greater

Пример 2: Оператор if-else if-else

Чтобы проверить несколько условий, используйте else if для добавления ветвей.

 1let score: number = 85;
 2
 3if (score >= 90) {
 4    console.log("Excellent");
 5} else if (score >= 70) {
 6    console.log("Passed");
 7} else {
 8    console.log("Failed");
 9}
10// Outputs: Passed

Пример 3: Оператор if с проверкой типов

Также можно выполнять условное ветвление для определенных типов, используя проверку типов в TypeScript. Например, проверьте тип переменной с помощью оператора typeof и выполните соответствующую обработку.

 1let value: any = "Hello";
 2
 3if (typeof value === "string") {
 4    console.log("The value is a string: " + value);
 5} else if (typeof value === "number") {
 6    console.log("The value is a number: " + value);
 7} else {
 8    console.log("The value is of another type");
 9}
10// Outputs: "The value is a string: Hello"

Пример 4: Вложенные операторы if

Вы также можете вкладывать операторы if, чтобы проверять сложные условия.

 1let age: number = 25;
 2let isMember: boolean = true;
 3
 4if (age >= 18) {
 5    if (isMember) {
 6        console.log("You are a member and 18 years old or older");
 7    } else {
 8        console.log("You are not a member but 18 years old or older");
 9    }
10} else {
11    console.log("You are under 18 years old");
12}
13// Output
14// You are a member and 18 years old or older

Тернарный оператор (условный оператор)

Синтаксис

1condition ? valueIfTrue : valueIfFalse

Если вы хотите написать оператор if более лаконично, вы можете использовать тернарный оператор.

Пример

1const number: number = 7;
2const result: string = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

В этом случае, поскольку number равно 7, будет отображено Odd.

Резюме

• Оператор if является основной управляющей конструкцией для определения того, какую обработку выполнять на основе условий.
• Вы можете управлять несколькими условиями, используя else if.
• Используя typeof, вы можете использовать типы TypeScript для условного ветвления.
• Обработка сложных условий возможна с помощью вложенных операторов if.
• Вы также можете использовать тернарный оператор для лаконичного написания условных ветвлений.

В TypeScript использование операторов if с учетом типов может повысить надежность кода.

Операторы switch в TypeScript

Оператор switch в TypeScript представляет собой управляющую конструкцию, используемую для ветвления кода на основе нескольких условий. Вместо использования операторов if-else if для проверки нескольких условий вы можете использовать оператор switch для лаконичного написания логики ветвления на основе конкретных значений.

Базовый синтаксис

 1switch (expressionToEvaluate) {
 2    case value1:
 3        // Code to execute if the expression evaluates to value1
 4        break;
 5    case value2:
 6        // Code to execute if the expression evaluates to value2
 7        break;
 8    default:
 9        // Code to execute if none of the conditions match
10}

В операторе switch, если значение, указанное в case, совпадает с вычисленным выражением, выполняется блок case. Будьте внимательны: если отсутствует оператор break, выполняется следующий блок case подряд. Блок default выполняется, если ни одно из выражений case не совпадает.

Пример 1: Основной оператор switch

В приведенном ниже примере используется число, представляющее день недели (от 0 до 6), и на его основании выводится соответствующее название дня.

 1let day: number = 3;
 2
 3switch (day) {
 4    case 0:
 5        console.log("Sunday");
 6        break;
 7    case 1:
 8        console.log("Monday");
 9        break;
10    case 2:
11        console.log("Tuesday");
12        break;
13    case 3:
14        console.log("Wednesday");
15        break;
16    case 4:
17        console.log("Thursday");
18        break;
19    case 5:
20        console.log("Friday");
21        break;
22    case 6:
23        console.log("Saturday");
24        break;
25    default:
26        console.log("Invalid day");
27}
28// Outputs: Wednesday

Пример 2: Использование default

default полезен, поскольку выполняется, если ни одно из выражений case не совпадает, что позволяет обрабатывать неожиданные значения.

 1let statusText: string = "pending";
 2
 3switch (statusText) {
 4    case "success":
 5        console.log("Operation succeeded");
 6        break;
 7    case "error":
 8        console.log("An error occurred");
 9        break;
10    case "pending":
11        console.log("Processing");
12        break;
13    default:
14        console.log("Unknown status");
15}
16// Outputs: Processing

Пример 3: Выполнение одного процесса для нескольких case

Если вы хотите выполнить одно и то же действие для нескольких выражений case, вы можете перечислить их последовательно.

 1let fruit: string = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5    case "banana":
 6    case "orange":
 7        console.log("This is a fruit");
 8        break;
 9    default:
10        console.log("This is not a fruit");
11}
12// Outputs: This is a fruit

Пример 4: Поведение при пропуске break

Пропуск break приводит к поведению "падения", когда выполняется следующий case.

 1let rank: number = 1;
 2
 3switch (rank) {
 4    case 1:
 5        console.log("Gold");
 6    case 2:
 7        console.log("Silver");
 8    case 3:
 9        console.log("Bronze");
10    default:
11        console.log("Not ranked");
12}
13// Outputs:
14// Gold
15// Silver
16// Bronze
17// Not ranked

Таким образом, после совпадения с case выполняется следующий case, поэтому обычно используется break, чтобы предотвратить ненужное выполнение.

Резюме

• Оператор switch — это управляющая структура, которая позволяет лаконично писать логику ветвления на основе нескольких условий.
• Каждое выражение case должно явным образом завершать процесс с помощью break.
• Блок default выполняется, если ни одно из выражений case не совпадает.
• Также можно выполнить одну и ту же операцию для нескольких выражений case.

Оператор switch в TypeScript полезен для эффективной обработки множества условий при сохранении читабельности кода.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video