4_TypeScript 条件语句 --[深入浅出 TypeScript 测试]
在 TypeScript 中，条件语句用于根据不同的条件执行不同的代码块。这些语句包括 if 语句、else if 语句、else 语句和 switch 语句。通过使用条件语句，你可以编写出能够根据特定逻辑分支的代码，从而实现更加动态和灵活的功能。
1. if 语句
if 语句是最基本的条件语句，它允许你指定当某个条件为真时要执行的代码块。
let age = 20;
if (age >= 18) {
console.log("You are an adult.");
}
当然，以下是两个使用 if 语句的 TypeScript 示例，分别展示了简单条件检查和结合类型保护的情况。
示例 1：简单的条件检查
这个例子展示了一个基本的 if 语句，用于根据用户的年龄判断是否允许访问某个功能。
function checkAccess(age: number): void {
if (age >= 18) {
console.log("Access granted. You are an adult.");
} else {
console.log("Access denied. You must be at least 18 years old.");
}
}
// 测试示例
checkAccess(20); // 输出 "Access granted. You are an adult."
checkAccess(16); // 输出 "Access denied. You must be at least 18 years old."
在这个例子中，if 语句检查用户提供的年龄是否大于或等于 18。如果条件为真，则打印一条消息表示允许访问；否则，打印另一条消息表示拒绝访问。
示例 2：结合类型保护的 if 语句
这个例子展示了如何在 if 语句中使用类型保护来处理联合类型（Union Types）。这里我们定义了两种动物类型，并编写一个函数来根据传入的对象执行不同的行为。
interface Bird {
fly(): void;
}
interface Fish {
swim(): void;
}
function isFish(animal: Fish | Bird): animal is Fish {
return (animal as Fish).swim !== undefined;
}
function moveAnimal(animal: Fish | Bird): void {
if (isFish(animal)) {
animal.swim();
} else {
animal.fly();
}
}
// 创建实例并测试
const bird: Bird = {
fly() {
console.log("The bird is flying.");
}
};
const fish: Fish = {
swim() {
console.log("The fish is swimming.");
}
};
moveAnimal(bird); // 输出 "The bird is flying."
moveAnimal(fish); // 输出 "The fish is swimming."
在这个例子中，isFish 函数是一个用户定义的类型保护，它帮助 TypeScript 编译器理解在 if 语句内部，animal 的具体类型是什么。因此，在 moveAnimal 函数中，我们可以安全地调用 swim() 或 fly() 方法，而不必担心类型错误。
这两个示例展示了 if 语句的基本用法以及它与 TypeScript 类型系统的集成，确保代码既简洁又类型安全。
2. if...else 语句
if...else 语句允许你指定两个可能的代码块：一个是在条件为真时执行，另一个是在条件为假时执行。
let temperature = 30;
if (temperature > 25) {
console.log("It's hot outside.");
} else {
console.log("It's cool outside.");
}
当然，以下是两个使用 if...else 语句的 TypeScript 示例，分别展示了基本条件分支和结合类型保护的情况。
示例 1：基本条件分支
这个例子展示了一个简单的 if...else 语句，用于根据天气状况决定是否需要带伞。
function shouldTakeUmbrella(weather: string): void {
if (weather === "rainy") {
console.log("It's raining. You should take an umbrella.");
} else {
console.log("The weather is nice. No need for an umbrella.");
}
}
// 测试示例
shouldTakeUmbrella("rainy"); // 输出 "It's raining. You should take an umbrella."
shouldTakeUmbrella("sunny"); // 输出 "The weather is nice. No need for an umbrella."
在这个例子中，if...else 语句检查天气是否为“rainy”。如果是，则建议带上雨伞；否则，告知天气良好，不需要带伞。这是一个非常直观的例子，展示了如何使用 if...else 来处理二元选择。
示例 2：结合类型保护的 if...else 语句
这个例子展示了如何在 if...else 语句中使用类型保护来处理联合类型（Union Types）。这里我们定义了两种动物类型，并编写一个函数来根据传入的对象执行不同的行为。
interface Bird {
fly(): void;
}
interface Fish {
swim(): void;
}
function isFish(animal: Fish | Bird): animal is Fish {
return (animal as Fish).swim !== undefined;
}
function moveAnimal(animal: Fish | Bird): void {
if (isFish(animal)) {
animal.swim();
} else {
animal.fly();
}
}
// 创建实例并测试
const bird: Bird = {
fly() {
console.log("The bird is flying.");
}
};
const fish: Fish = {
swim() {
console.log("The fish is swimming.");
}
};
moveAnimal(bird); // 输出 "The bird is flying."
moveAnimal(fish); // 输出 "The fish is swimming."
在这个例子中，isFish 函数是一个用户定义的类型保护，它帮助 TypeScript 编译器理解在 if...else 语句内部，animal 的具体类型是什么。因此，在 moveAnimal 函数中，我们可以安全地调用 swim() 或 fly() 方法，而不必担心类型错误。
这两个示例展示了 if...else 语句的基本用法以及它与 TypeScript 类型系统的集成，确保代码既简洁又类型安全。通过这些例子，你可以看到 if...else 语句是如何用来实现逻辑分支的，无论是简单的二元选择还是更复杂的类型保护场景。
3. if...else if...else 语句
当你有多个条件需要检查时，可以使用 if...else if...else 结构。这使得你可以定义一系列的条件，并依次检查每个条件，直到找到第一个为真的条件并执行相应的代码块。如果没有条件为真，则执行最后的 else 块（如果存在）。
let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else if (score >= 60) {
console.log("Grade: D");
} else {
console.log("Grade: F");
}
当然，以下是两个使用 if...else if...else 语句的 TypeScript 示例。这些示例展示了如何处理多个条件分支，并且涵盖了从简单的逻辑判断到结合类型保护的复杂场景。
示例 1：学生成绩等级评定
这个例子展示了一个 if...else if...else 语句，用于根据学生的分数来评定成绩等级。
function getGrade(score: number): string {
if (score >= 90) {
return "A";
} else if (score >= 80) {
return "B";
} else if (score >= 70) {
return "C";
} else if (score >= 60) {
return "D";
} else {
return "F";
}
}
// 测试示例
console.log(getGrade(95)); // 输出 "A"
console.log(getGrade(82)); // 输出 "B"
console.log(getGrade(76)); // 输出 "C"
console.log(getGrade(65)); // 输出 "D"
console.log(getGrade(58)); // 输出 "F"
在这个例子中，if...else if...else 语句检查学生的分数，并根据不同的分数范围返回相应的成绩等级。每个 else if 分支都检查下一个条件，直到找到匹配的条件为止；如果没有一个条件匹配，则执行 else 分支中的代码。
示例 2：处理多种用户角色的访问权限
这个例子展示了如何在 if...else if...else 语句中结合类型保护来处理不同类型的用户角色，并授予相应的访问权限。
interface Admin {
role: 'admin';
manageSystem(): void;
}
interface Editor {
role: 'editor';
editContent(): void;
}
interface Viewer {
role: 'viewer';
viewContent(): void;
}
function getUserRole(user: Admin | Editor | Viewer): void {
if (user.role === 'admin') {
user.manageSystem();
} else if (user.role === 'editor') {
user.editContent();
} else {
user.viewContent();
}
}
// 创建实例并测试
const adminUser: Admin = {
role: 'admin',
manageSystem() {
console.log("Admin is managing the system.");
}
};
const editorUser: Editor = {
role: 'editor',
editContent() {
console.log("Editor is editing content.");
}
};
const viewerUser: Viewer = {
role: 'viewer',
viewContent() {
console.log("Viewer is viewing content.");
}
};
getUserRole(adminUser); // 输出 "Admin is managing the system."
getUserRole(editorUser); // 输出 "Editor is editing content."
getUserRole(viewerUser); // 输出 "Viewer is viewing content."
在这个例子中，getUserRole 函数接收一个联合类型（Admin | Editor | Viewer）的用户对象，并根据用户的 role 属性执行不同的行为。if...else if...else 语句依次检查用户的角色，并调用相应的方法。这里没有使用显式的类型保护函数，而是直接通过属性 role 来区分不同类型的用户。
这两个示例展示了 if...else if...else 语句的强大之处，它允许你清晰地表达多条件分支逻辑，并且与 TypeScript 的类型系统很好地集成在一起。无论是简单的数值比较还是复杂的类型检查，这种结构都能帮助你编写出逻辑严密、易于维护的代码。
4. switch 语句
switch 语句提供了一种更简洁的方式来处理多条件分支的情况。它将表达式的值与一系列的 case 标签进行匹配，并执行匹配成功的代码块。如果没有匹配成功，则可以选择性地执行 default 块中的代码。
let dayOfWeek = "Wednesday";
switch (dayOfWeek) {
case "Monday":
console.log("Start of the week.");
break;
case "Tuesday":
console.log("Second day of the week.");
break;
case "Wednesday":
console.log("Middle of the week.");
break;
case "Thursday":
console.log("Almost weekend.");
break;
case "Friday":
console.log("End of the work week!");
break;
default:
console.log("It's a weekend.");
break;
}
注意事项：
break关键字：每个case块后通常需要使用break来防止“贯穿”（fall-through），即执行完一个case后继续执行下一个case的代码。default标签：它是可选的，但如果提供了，应该放在所有case标签之后。
当然，以下是两个使用 switch 语句的 TypeScript 示例。这些示例展示了如何使用 switch 语句来处理多个条件分支，并且涵盖了从简单的逻辑判断到结合类型保护的复杂场景。
示例 1：根据星期几安排活动
这个例子展示了一个 switch 语句，用于根据当前是星期几来决定当天的活动安排。
function getActivity(day: string): string {
switch (day.toLowerCase()) {
case 'monday':
return "Start of the week. Plan your schedule.";
case 'tuesday':
return "Catch up on emails and meetings.";
case 'wednesday':
return "Mid-week check-in with team.";
case 'thursday':
return "Prepare for end-of-week review.";
case 'friday':
return "Finish pending tasks and plan for next week.";
case 'saturday':
case 'sunday':
return "Relax and enjoy the weekend!";
default:
return "Invalid day provided.";
}
}
// 测试示例
console.log(getActivity("Monday")); // 输出 "Start of the week. Plan your schedule."
console.log(getActivity("Friday")); // 输出 "Finish pending tasks and plan for next week."
console.log(getActivity("Sunday")); // 输出 "Relax and enjoy the weekend!"
console.log(getActivity("Holiday")); // 输出 "Invalid day provided."
在这个例子中，switch 语句检查传入的 day 参数，并根据不同的值返回相应的活动建议。注意我们使用了 toLowerCase() 方法来确保输入不区分大小写。此外，case 'saturday' 和 case 'sunday' 合并在一起，因为它们共享相同的处理逻辑。
示例 2：处理用户输入命令
这个例子展示了如何在 switch 语句中结合类型保护和联合类型来处理用户输入的不同命令。
type Command = 'add' | 'remove' | 'list' | 'exit';
interface AddCommand {
command: 'add';
item: string;
}
interface RemoveCommand {
command: 'remove';
id: number;
}
interface ListCommand {
command: 'list';
}
interface ExitCommand {
command: 'exit';
}
function processCommand(commandData: AddCommand | RemoveCommand | ListCommand | ExitCommand): void {
switch (commandData.command) {
case 'add':
console.log(`Adding item: ${commandData.item}`);
break;
case 'remove':
console.log(`Removing item with ID: ${commandData.id}`);
break;
case 'list':
console.log("Listing all items.");
break;
case 'exit':
console.log("Exiting the application.");
break;
default:
console.log("Unknown command.");
}
}
// 创建实例并测试
const addCmd: AddCommand = { command: 'add', item: 'Notebook' };
const removeCmd: RemoveCommand = { command: 'remove', id: 42 };
const listCmd: ListCommand = { command: 'list' };
const exitCmd: ExitCommand = { command: 'exit' };
processCommand(addCmd); // 输出 "Adding item: Notebook"
processCommand(removeCmd); // 输出 "Removing item with ID: 42"
processCommand(listCmd); // 输出 "Listing all items."
processCommand(exitCmd); // 输出 "Exiting the application."
在这个例子中，processCommand 函数接收一个联合类型的命令对象，并根据 command 属性执行不同的操作。每个 case 分支处理一种特定的命令类型。这里我们利用了 TypeScript 的类型系统，确保每个命令对象都有正确的结构。
这两个示例展示了 switch 语句的基本用法以及它与 TypeScript 类型系统的集成。通过这些例子，你可以看到 switch 语句是如何用来处理多条件分支逻辑的，无论是简单的字符串匹配还是更复杂的类型检查场景。同时，switch 语句通常比多个 if...else if 更加简洁明了，特别是在有多个离散选项需要处理时。
5. 类型保护与条件语句结合
TypeScript 允许你在条件语句中使用类型保护来缩小联合类型的范围。这可以让你根据条件更精确地处理不同类型的变量。
function padLeft(value: string, padding: string | number) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
return padding + value;
}
// 或者使用用户定义的类型保护
interface Bird {
fly(): void;
}
interface Fish {
swim(): void;
}
function isFish(animal: Fish | Bird): animal is Fish {
return (animal as Fish).swim !== undefined;
}
function getFood(animal: Fish | Bird) {
if (isFish(animal)) {
animal.swim();
} else {
animal.fly();
}
}
总结
通过合理使用 if、else if、else 和 switch 语句，你可以创建出清晰、易于维护且逻辑严密的代码。同时，结合 TypeScript 的类型系统，如类型保护等功能，可以使你的条件逻辑更加安全和强大。确保在编写条件语句时考虑代码的可读性和性能，避免过多嵌套或复杂的逻辑结构。