Các lệnh điều kiện trong TypeScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về các lệnh điều kiện if...else, switch...case trong TypeScript.

Lệnh điều kiện if else trong TypeScript

Lệnh if trong TypeScript

Câu lệnh if thực thi các câu lệnh dựa trên điều kiện. Nếu điều kiện là true, câu lệnh if sẽ thực thi các câu lệnh bên trong phần thân của nó:

if (condition) {
   // if-statement
}

Ví dụ: câu lệnh sau minh họa cách sử dụng câu lệnh if để tăng giá trị biến counter nếu giá trị của nó nhỏ hơn giá trị của hằng số max:

const max = 100;
let counter = 0;

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

console.log(counter); // 1

Đầu ra:

1

Trong ví dụ này, vì biến counter bắt đầu bằng 0 nên nó nhỏ hơn hằng số max. Biểu thức counter < max trả về true do đó câu lệnh if thực hiện câu lệnh counter++.

Hãy khởi tạo biến counter thành 100:

const max = 100;
let counter = 100;

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

console.log(counter); // 100

Đầu ra:

100

Trong ví dụ này, biểu thức counter < max trả về false. Câu lệnh if không được thực hiện. Do đó, đầu ra là 100.

Lệnh if… else trong TypeScript

Nếu bạn muốn thực thi các câu lệnh khác khi điều kiện trong câu lệnh if đánh giá là false, bạn có thể sử dụng câu lệnh if...else:

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

Sau đây minh họa một ví dụ về việc sử dụng câu lệnh if..else:

const max = 100;
let counter = 100;

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

console.log(counter);

Đầu ra:

1

Trong ví dụ này, biểu thức counter < max trả về false do đó câu lệnh trong nhánh else sẽ thực thi và gán giá trị 1 cho biến counter.

Toán tử bậc ba ?:

Trong thực tế, nếu bạn có một điều kiện đơn giản, bạn có thể sử dụng toán tử bậc ba ?: thay vì sử dụng câu lệnh if...else để làm cho mã ngắn hơn như sau:

const max = 100;
let counter = 100;

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

console.log(counter);

Lệnh if…else if…else trong TypeScript

Khi bạn muốn thực thi mã dựa trên nhiều điều kiện, bạn có thể sử dụng câu lệnh if...else if...else.

Câu lệnh if…else if…else có thể có một hoặc nhiều nhánh else if nhưng chỉ có một nhánh else.

Ví dụ:

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

Đầu ra:

You got 15% discount.

Ví dụ này sử dụng câu lệnh if...elseif...else để xác định chiết khấu dựa trên số lượng mặt hàng.

Nếu số lượng hàng từ nhỏ hơn hoặc bằng 5 thì chiết khấu là 5%. Câu lệnh trong nhánh if được thực thi,

Nếu số lượng mặt hàng lớn hơn 5 và nhỏ hơn hoặc bằng 10, chiết khấu là 10%. Câu lệnh trong nhánh else if được thực thi.

Khi số lượng hàng lớn hơn 10, chiết khấu là 15%. Câu lệnh trong nhánh else được thực thi.

Trong ví dụ này, số lượng mặt hàng là 11, nên câu lệnh trong nhánh else sẽ được thực thi và chiết khấu là 15%.

Để làm cho mã mạnh mẽ hơn, bạn có thể sử dụng thêm một nhánh else ifelse khác như sau:

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

Trong ví dụ này, chỉ khi số lượng mặt hàng lớn hơn 10, chiết khấu là 15%. Câu lệnh trong nhánh else if thứ hai thực thi.

Nếu số lượng mặt hàng nhỏ hơn 0, câu lệnh trong nhánh else sẽ thực thi.

Lệnh switch case trong TypeScript

Nếu bạn có nhiều điều kiện rẽ nhánh thì câu lệnh if...else if...else sẽ trở nên cồng kềnh và không còn dễ đọc. Trong trường hợp này bạn nên sử dụng câu lệnh switch...case.

Sau đây là cú pháp của câu lệnh switch...case:

switch ( expression ) {
   case value1:
       // statement 1
       break;
   case value2:
       // statement 2
       break;
   case valueN:
       // statement N
       break;
   default: 
       // 
       break;
}

Câu lệnh switch...case hoạt động như thế nào:

Đầu tiên, câu lệnh switch...case sẽ đánh giá biểu thức expression.

Sau đó, nó sẽ tìm kiếm mệnh đề case đầu tiên mà giá trị của biểu thức expression tương đương với giá trị của nó (value1, value2, ... valueN).

Câu lệnh switch...case sẽ thực hiện câu lệnh trong mệnh đề case đầu tiên có giá trị khớp.

Nếu không tìm thấy mệnh đề case phù hợp, câu lệnh switch...case sẽ tìm mệnh đề default tùy chọn. Nếu có sẵn mệnh đề default, nó thực hiện câu lệnh trong mệnh đề default.

Câu lệnh break liên kết với mỗi mệnh đề case để đảm bảo kiểm soát thoát ra khỏi câu lệnh switch...case khi các câu lệnh trong mệnh đề case hoàn thành.

Nếu mệnh đề case phù hợp không có câu lệnh break, thì việc thực thi chương trình sẽ tiếp tục ở câu lệnh tiếp theo trong câu lệnh switch...case.

Theo quy ước, mệnh đề default là mệnh đề nằm cuối cùng trong câu lệnh switch...case. Tuy nhiên, nó là tùy chọn và không bắt buộc phải có trong câu lệnh switch...case.

Ví dụ về câu lệnh switch… case trong TypeScript

Hãy lấy một số ví dụ về việc sử dụng lệnh switch… case.

Ví dụ về câu lệnh switch… case đơn giản trong TypeScript

Ví dụ sau cho thấy một câu lệnh switch...case đơn giản hiển thị thông báo dựa trên biến targetId:

let targetId = 'btnDelete';

switch (targetId) {
    case 'btnUpdate':
        console.log('Update');
        break;
    case 'btnDelete':
        console.log('Delete');
        break;
    case 'btnNew':
        console.log('New');
        break;
}

Đầu ra:

Delete

Trong ví dụ này, giá trị của biến targetId được đặt thành btnDelete.

Câu lệnh switch...case so sánh giá trị của biến targetId với một danh sách các giá trị. Bởi vì giá trị của biến targetId khớp với mệnh đề case 'btnDelete': nên các lệnh trong case này sẽ được thực thi.

Ví dụ về gom nhóm các case trong TypeScript

Nếu bạn có code được chia sẻ bởi nhiều case khác nhau, bạn có thể nhóm chúng lại. Ví dụ:

// change the month and year
let month = 2,
    year = 2020;

let day = 0;
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        day = 31;
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        day = 30;
        break;
    case 2:
        // leap year
        if (((year % 4 == 0) && !(year % 100 == 0))
            || (year % 400 == 0))
            day = 29;
        else
            day = 28;
        break;
    default:
        throw Error('Invalid month');
}

console.log(`The month ${month} in ${year} has ${day} days`);

Đầu ra:

The month 2 in 2020 has 29 days

Ví dụ này trả về các ngày của một tháng và năm cụ thể.

Nếu tháng là 1,3, 5, 7, 8, 12, số ngày là 31. Nếu tháng là 4, 6, 9 hoặc 11, số ngày là 30.

Nếu tháng là 2 và năm là năm nhuận, nó trả về 29 ngày, ngược lại, nó trả về 28 ngày.

Tóm lược

  • Sử dụng câu lệnh if để thực thi mã dựa trên một điều kiện.
  • Sử dụng nhánh else nếu bạn muốn thực thi mã khi điều kiện sai. Bạn nên sử dụng toán tử bậc ba ?: thay thế câu lệnh if…else đơn giản.
  • Sử dụng câu lệnh if...else if...else để thực thi mã dựa trên nhiều điều kiện.
  • Sử dụng câu lệnh switch...case khi bạn có nhiều điều kiện rẽ nhánh làm cho câu lệnh if...else cồng kềnh và khó đọc.
  • Mỗi mệnh đề case kết thúc bằng câu lệnh break để đảm bảo kiểm soát thoát ra khỏi câu lệnh switch...case khi các câu lệnh trong mệnh đề case hoàn thành.
  • Mệnh đề default là mệnh đề tùy chọn nằm cuối cùng trong câu lệnh switch...case sẽ được thực thi nếu không có case nào phù hợp với biểu thức expression.
  • Nếu bạn có code được chia sẻ bởi các case khác nhau, bạn có thể nhóm các case này lại thành 1 case.
TypeScript
Bài Viết Liên Quan:
Generic type trong TypeScript
Trung Nguyen 20/12/2020
Generic type trong TypeScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về generic type trong TypeScript cho phép bạn sử dụng các kiểu dữ liệu làm tham số chính thức.

Kiểu dữ liệu nâng cao trong TypeScript
Trung Nguyen 08/12/2020
Kiểu dữ liệu nâng cao trong TypeScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về kiểu giao (intersection type), an toàn kiểu (type guard), ép kiểu (type casting) và xác nhận kiểu (type assertions) trong TypeScript .

Interface trong TypeScript
Trung Nguyen 06/12/2020
Interface trong TypeScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về interface trong TypeScript, cách định nghĩa, cách mở rộng interface và cách sử dụng chúng để thực thi kiểm tra kiểu dữ liệu.

Class trong TypeScript
Trung Nguyen 05/12/2020
Class trong TypeScript

Trong hướng dẫn này, bạn sẽ tìm hiểu từ A-Z về class (lớp), abstract class, kiểm soát truy cập, thuộc tính chỉ đọc, kế thừa, ... trong TypeScript.