面试题：TypeScript类型推断与类型断言的应用

Question

请说明TypeScript中类型推断和类型断言的区别，并举例说明在哪些场景下会用到类型断言。同时，请编写一段TypeScript代码，展示类型推断的自动类型推导，以及使用类型断言来改变编译器推断结果的情况。

Answer 1

类型推断和类型断言的区别

1. 类型推断（Type Inference）：
   • 定义：TypeScript 编译器根据代码的上下文自动推导出变量或表达式的类型。它使得开发者在很多情况下不需要显式地声明类型，从而减少代码冗余。
   • 示例：

let num = 10; // 这里编译器自动推断num的类型为number

2. 类型断言（Type Assertion）：
   • 定义：开发者手动告诉编译器某个值的类型，当编译器无法正确推断类型，或者开发者比编译器更明确某个值的类型时使用。类型断言不是类型转换，它只是告诉编译器“相信我，这个值就是这个类型”。
   • 示例：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length; // 使用类型断言告诉编译器someValue是string类型

类型断言的使用场景

1. 从 any 类型明确具体类型：
   • 当一个变量被声明为 any 类型，但你知道它实际是什么类型时，可使用类型断言。例如：

let data: any = {name: 'John', age: 30};
let nameLength: number = (data as {name: string}).name.length;

2. DOM 操作场景：
   • 当从 DOM 获取元素时，TypeScript 可能无法准确推断其类型。比如：

let el = document.getElementById('myButton');
if (el) {
    (el as HTMLButtonElement).click(); // 断言el是HTMLButtonElement类型才能调用click方法
}

代码展示

// 类型推断的自动类型推导
let message = 'Hello, TypeScript'; // 编译器自动推断message为string类型
function printMessage() {
    console.log(message);
}
printMessage();

// 使用类型断言改变编译器推断结果
let value: any = '123';
let numValue: number = parseInt(value as string); // 断言value是string类型，然后使用parseInt转换为number
console.log(numValue);