TypeScript 条件语句

条件语句是编程中常用的控制结构，用于根据不同的条件执行不同的代码块。TypeScript 支持与 JavaScript 相同的条件语句，包括 if 语句、if-else 语句、if-else if-else 语句和 switch 语句。本文将详细介绍 TypeScript 中的条件语句。

1. if 语句

if 语句用于在条件为真时执行代码块。

语法

if (条件) {
  // 条件为真时执行的代码
}

示例

let age: number = 18;

if (age >= 18) {
  console.log("成年人");
}

// 输出：成年人

2. if-else 语句

if-else 语句用于在条件为真时执行一个代码块，在条件为假时执行另一个代码块。

语法

if (条件) {
  // 条件为真时执行的代码
} else {
  // 条件为假时执行的代码
}

示例

let age: number = 16;

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

// 输出：未成年人

3. if-else if-else 语句

if-else if-else 语句用于在多个条件中选择一个执行。

语法

if (条件1) {
  // 条件1为真时执行的代码
} else if (条件2) {
  // 条件2为真时执行的代码
} else if (条件3) {
  // 条件3为真时执行的代码
} else {
  // 所有条件都为假时执行的代码
}

示例

let score: number = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else if (score >= 60) {
  console.log("D");
} else {
  console.log("E");
}

// 输出：B

4. switch 语句

switch 语句用于根据表达式的值选择执行不同的代码块。

语法

switch (表达式) {
  case 值1:
    // 表达式等于值1时执行的代码
    break;
  case 值2:
    // 表达式等于值2时执行的代码
    break;
  case 值3:
    // 表达式等于值3时执行的代码
    break;
  default:
    // 表达式不等于任何值时执行的代码
    break;
}

示例

let day: number = 3;
let dayName: string;

switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  case 3:
    dayName = "星期三";
    break;
  case 4:
    dayName = "星期四";
    break;
  case 5:
    dayName = "星期五";
    break;
  case 6:
    dayName = "星期六";
    break;
  case 7:
    dayName = "星期日";
    break;
  default:
    dayName = "无效的日期";
    break;
}

console.log(dayName); // 输出：星期三

注意事项

1. switch 语句使用严格相等（===）进行比较，所以类型和值都必须匹配。
2. break 语句用于跳出 switch 语句，如果没有 break，会继续执行下一个 case。
3. default 分支是可选的，当没有匹配的 case 时执行。

示例：没有 break 的情况

let grade: string = "B";

switch (grade) {
  case "A":
    console.log("优秀");
  case "B":
    console.log("良好");
  case "C":
    console.log("及格");
  default:
    console.log("不及格");
}

// 输出：
// 良好
// 及格
// 不及格

5. 条件表达式（三元运算符）

条件表达式是一种简洁的条件语句，也称为三元运算符。

语法

条件 ? 值1 : 值2

示例

let age: number = 18;
let message: string = age >= 18 ? "成年人" : "未成年人";
console.log(message); // 输出：成年人

// 嵌套三元运算符
let score: number = 85;
let grade: string = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
console.log(grade); // 输出：B

6. 类型守卫

类型守卫是 TypeScript 中的一种特殊条件语句，用于在运行时检查变量的类型，以便在不同的类型分支中使用不同的类型特性。

typeof 类型守卫

function processValue(value: string | number) {
  if (typeof value === "string") {
    // 在这个分支中，TypeScript 知道 value 是 string 类型
    console.log(value.toUpperCase());
  } else {
    // 在这个分支中，TypeScript 知道 value 是 number 类型
    console.log(value.toFixed(2));
  }
}

processValue("hello"); // 输出：HELLO
processValue(42); // 输出：42.00

instanceof 类型守卫

class Animal {
  makeSound(): void {
    console.log("Some generic sound");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Woof! Woof!");
  }

  fetch(): void {
    console.log("Fetching the ball");
  }
}

class Cat extends Animal {
  makeSound(): void {
    console.log("Meow! Meow!");
  }

  scratch(): void {
    console.log("Scratching the furniture");
  }
}

function processAnimal(animal: Animal) {
  animal.makeSound();

  if (animal instanceof Dog) {
    // 在这个分支中，TypeScript 知道 animal 是 Dog 类型
    animal.fetch();
  } else if (animal instanceof Cat) {
    // 在这个分支中，TypeScript 知道 animal 是 Cat 类型
    animal.scratch();
  }
}

const dog = new Dog();
const cat = new Cat();

processAnimal(dog);
// 输出：
// Woof! Woof!
// Fetching the ball

processAnimal(cat);
// 输出：
// Meow! Meow!
// Scratching the furniture

自定义类型守卫

interface Person {
  name: string;
  age: number;
}

interface Animal {
  name: string;
  species: string;
}

function isPerson(obj: any): obj is Person {
  return "age" in obj;
}

function isAnimal(obj: any): obj is Animal {
  return "species" in obj;
}

function processEntity(entity: Person | Animal) {
  console.log(`Name: ${entity.name}`);

  if (isPerson(entity)) {
    // 在这个分支中，TypeScript 知道 entity 是 Person 类型
    console.log(`Age: ${entity.age}`);
  } else if (isAnimal(entity)) {
    // 在这个分支中，TypeScript 知道 entity 是 Animal 类型
    console.log(`Species: ${entity.species}`);
  }
}

const person: Person = { name: "John", age: 30 };
const animal: Animal = { name: "Buddy", species: "Dog" };

processEntity(person);
// 输出：
// Name: John
// Age: 30

processEntity(animal);
// 输出：
// Name: Buddy
// Species: Dog

7. 条件类型

条件类型是 TypeScript 中的一种高级类型，用于根据条件选择不同的类型。

语法

T extends U ? X : Y

示例

// 条件类型示例
type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

// 泛型条件类型
type Extract<T, U> = T extends U ? T : never;
type T0 = Extract<string | number | boolean, string>; // string
type T1 = Extract<string | number | boolean, number>; // number

// 条件类型与映射类型结合
type Nullable<T> = T extends null | undefined ? T : T | null;
type T2 = Nullable<string>; // string | null
type T3 = Nullable<null>; // null
type T4 = Nullable<undefined>; // undefined

8. 最佳实践

1. 使用严格相等

在条件语句中，尽量使用严格相等（===）而不是宽松相等（==），以避免类型转换带来的意外行为。

// 推荐
if (age === 18) {
  // 代码
}

// 不推荐
if (age == 18) {
  // 代码
}

2. 保持条件简洁

条件表达式应该简洁明了，避免过于复杂的逻辑。

// 推荐
if (isAdult && hasPermission) {
  // 代码
}

// 不推荐
if (age >= 18 && (role === "admin" || role === "moderator")) {
  // 代码
}

3. 使用早期返回

对于复杂的条件逻辑，使用早期返回可以使代码更清晰。

// 推荐
function processUser(user: User) {
  if (!user) {
    return;
  }

  if (!user.active) {
    return;
  }

  // 处理活跃用户
}

// 不推荐
function processUser(user: User) {
  if (user) {
    if (user.active) {
      // 处理活跃用户
    }
  }
}

4. 避免深度嵌套

深度嵌套的条件语句会使代码难以阅读和维护，应该尽量避免。

// 推荐
function getGrade(score: number) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  if (score >= 60) return "D";
  return "E";
}

// 不推荐
function getGrade(score: number) {
  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 "E";
        }
      }
    }
  }
}

5. 使用 switch 语句替代多个 if-else if

当有多个条件需要判断时，使用 switch 语句可以使代码更清晰。

// 推荐
switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  // 其他 case
}

// 不推荐
if (day === 1) {
  dayName = "星期一";
} else if (day === 2) {
  dayName = "星期二";
} else if (day === 3) {
  dayName = "星期三";
} // 其他条件

9. 常见错误

1. 忘记使用 break

在 switch 语句中，忘记使用 break 会导致代码继续执行下一个 case。

// 错误
switch (grade) {
  case "A":
    console.log("优秀");
  case "B":
    console.log("良好");
    break;
}

// 正确
switch (grade) {
  case "A":
    console.log("优秀");
    break;
  case "B":
    console.log("良好");
    break;
}

2. 使用赋值运算符而不是比较运算符

在条件语句中，使用赋值运算符（=）而不是比较运算符（===）会导致意外的行为。

// 错误
if (age = 18) {
  // 这会将 age 赋值为 18，然后检查是否为真值（总是为真）
}

// 正确
if (age === 18) {
  // 检查 age 是否等于 18
}

3. 忽略类型检查

在 TypeScript 中，条件语句应该考虑类型检查，以避免运行时错误。

// 错误
function processValue(value: string | number) {
  // 这里没有类型检查，可能会导致运行时错误
  console.log(value.toUpperCase());
}

// 正确
function processValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

总结

TypeScript 支持多种条件语句，包括：

• if 语句：在条件为真时执行代码块
• if-else 语句：在条件为真时执行一个代码块，在条件为假时执行另一个代码块
• if-else if-else 语句：在多个条件中选择一个执行
• switch 语句：根据表达式的值选择执行不同的代码块
• 条件表达式：一种简洁的条件语句，也称为三元运算符
• 类型守卫：用于在运行时检查变量的类型
• 条件类型：用于根据条件选择不同的类型

通过合理使用这些条件语句，你可以编写更清晰、更可维护的 TypeScript 代码。