面试题：TypeScript 类型断言与类型守卫的区别及应用场景

类型断言和类型守卫的主要区别

类型断言：
- 定义：类型断言是一种手动指定变量类型的方式，告诉编译器某个变量具有特定类型。它是开发者对类型的一种“自信声明”，编译器会按照开发者指定的类型来处理相关代码，不会进行运行时检查。
- 语法：有两种语法形式，as 语法和尖括号语法（在 JSX 中只能使用 as 语法）。例如 let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; 或者在非 JSX 环境中 let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;
类型守卫：
- 定义：类型守卫是一种运行时检查机制，用于在运行时确定一个变量的类型。它通过特定的检查函数或操作符，让 TypeScript 能够在代码执行过程中缩小变量的类型范围。
- 原理：类型守卫函数通常返回一个类型谓词，例如 function isString(value: any): value is string { return typeof value ==='string'; }，通过这种方式在运行时判断变量是否为指定类型。

实际前端开发场景中的应用

类型断言的应用场景：

第三方库使用：当使用一些没有完善类型定义的第三方库时，类型断言很有用。例如，假设引入了一个旧的图表库，它的返回值类型没有在 TypeScript 中明确声明。

const chart = require('old - chart - library');
const options = { /* some chart options */ };
// 假设该库返回一个具有特定方法的对象，但没有类型声明
const myChart = chart(options);
// 使用类型断言告诉 TypeScript 这个对象有一个名为'render' 的方法
(myChart as { render: () => void }).render();

DOM 操作：在获取 DOM 元素时，TypeScript 可能无法准确推断元素类型。例如获取一个 input 元素：

const inputElement = document.getElementById('myInput') as HTMLInputElement;
inputElement.value = 'Some value';

类型守卫的应用场景：

函数参数类型检查：在一个函数中，需要根据传入参数的不同类型执行不同逻辑时，类型守卫很有用。

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

数组元素类型过滤：假设有一个数组，可能包含不同类型元素，需要过滤出特定类型元素。

function isNumber(value: any): value is number {
  return typeof value === 'number';
}
const mixedArray: (string | number)[] = ['a', 1, 'b', 2];
const numberArray = mixedArray.filter(isNumber);
console.log(numberArray); // [1, 2]

星途面试题库

面试题：TypeScript 类型断言与类型守卫的区别及应用场景

知识考点

面试题答案

类型断言和类型守卫的主要区别

实际前端开发场景中的应用