面试题：TypeScript中的类型断言与类型守卫有何区别

Question

请阐述TypeScript里类型断言和类型守卫的概念，并举例说明它们在实际代码中的不同应用场景以及如何正确使用。

Answer 1

类型断言

• 概念：类型断言是一种手动指定变量类型的方式，告诉编译器某个值的类型，绕过编译器的类型检查。它用于开发者比编译器更清楚某个值的实际类型的情况。
• 应用场景及示例：
  • 场景：当调用一个可能返回多种类型值的函数，而你知道在特定条件下返回值的确切类型时。
  • 示例：

function getValue(): string | number {
  return Math.random() > 0.5? 'hello' : 42;
}
let result = getValue();
// 类型断言为string类型
let strResult = result as string; 
console.log(strResult.length); 

类型守卫

• 概念：类型守卫是一些表达式，在运行时检查类型，并在类型检查通过的代码块内，确保变量的类型。类型守卫通常基于typeof、instanceof、in等操作符，或者自定义的类型谓词函数。
• 应用场景及示例：
  • 场景：在函数内部，根据不同的输入值类型执行不同的逻辑。
  • 示例：

function printValue(value: string | number) {
  if (typeof value ==='string') {
    console.log(value.length); 
  } else {
    console.log(value.toFixed(2)); 
  }
}
printValue('test');
printValue(42);

• 自定义类型谓词函数示例：

function isString(value: any): value is string {
  return typeof value ==='string';
}
function processValue(value: string | number) {
  if (isString(value)) {
    console.log(value.length); 
  } else {
    console.log(value.toFixed(2)); 
  }
}
processValue('test');
processValue(42);