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 的类型系统，如类型保护等功能，可以使你的条件逻辑更加安全和强大。确保在编写条件语句时考虑代码的可读性和性能，避免过多嵌套或复杂的逻辑结构。