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 if
và else
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ệnhif…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ệnhif...else
cồng kềnh và khó đọc. - Mỗi mệnh đề
case
kết thúc bằng câu lệnhbreak
để đảm bảo kiểm soát thoát ra khỏi câu lệnhswitch...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ệnhswitch...case
sẽ được thực thi nếu không có case nào phù hợp với biểu thứcexpression
. - 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.