前端面试题121（请描述一下如何利用TypeScript的类型系统来避免潜在的运行时错误）

TypeScript 的类型系统是一种静态类型检查机制，它允许在编译阶段（即代码运行前）发现类型错误，从而帮助开发者提前避免许多潜在的运行时错误。以下是几种利用 TypeScript 类型系统来提升代码质量、减少运行时错误的方法：

1. 基础类型声明

为变量、函数参数和返回值指定明确的类型，这样TypeScript编译器就能在编译时检查类型是否匹配。

let myNumber: number = 42; // 正确
let errorMessage: string = "Something went wrong"; 
// 如果尝试赋值为数字，如errorMessage = 42，编译时会报错

2. 接口与类型别名

使用接口(interface)和类型别名(type)来定义复杂类型的结构，确保对象具有预期的属性和方法。

interface User {
  id: number;
  name: string;
}

function displayUser(user: User) {
  console.log(`User ID: ${user.id}, Name: ${user.name}`);
}

// 编译时错误，如果缺少某个属性
displayUser({ id: 1 }); // 缺少name属性，编译错误

3. 可选属性、默认参数与联合类型

• 可选属性：允许对象的某些属性可以不存在。
• 默认参数：为函数参数提供默认值。
• 联合类型：表示值可以是几种类型之一。

interface OptionalUser {
  id: number;
  name?: string; // 可选属性
}

function greetUser(user: OptionalUser, message: string = "Hello") { // 默认参数
  console.log(`${message}, ${user.name ?? "there"}!`);
}

greetUser({ id: 2 }); // 编译通过，因为name是可选的

4. 类型断言与类型守卫

• 类型断言：告诉编译器你比它更了解某个值的类型。
• 类型守卫：在条件语句中检查类型，从而在特定条件下窄化类型。

function processValue(value: number | string) {
  if (typeof value === 'string') { // 类型守卫
    console.log(value.toUpperCase());
  } else {
    console.log(value * 2);
  }
}

5. 使用null和undefined的严格检查

通过设置strictNullChecks，TypeScript会更严格地处理null和undefined，避免意外的空值引用错误。

6. 类与抽象类

通过定义类和抽象类，可以强制实现特定的方法，确保子类遵循一定的结构，提高代码的健壮性。

abstract class Animal {
  abstract makeSound(): void;
}

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

// 无法创建Animal实例，因为它是抽象的
// const animal = new Animal(); // 错误
const dog = new Dog();
dog.makeSound(); // Woof!

通过上述方法，TypeScript的类型系统能够帮助开发者在开发阶段就发现并修正类型相关的错误，从而显著减少运行时错误，提高代码质量和可维护性。