fe-interview
                                
                                
                                
                                    fe-interview copied to clipboard
                            
                            
                            
                        [TypeScript] 第1516天 在TypeScript中如何支持类型推断?
在 TypeScript 中,类型推断是指编译器根据代码的上下文自动推断出变量、参数、函数返回值等的类型,而不需要显式地声明类型。TypeScript 的类型推断机制非常强大,可以帮助开发者减少类型注释,提高代码的可读性和可维护性。以下是一些主要的类型推断场景和示例:
1. 变量类型推断
当你声明一个变量并赋值时,TypeScript 会根据赋值的表达式推断出变量的类型。
let x = 10; // x 的类型被推断为 number
let y = "hello"; // y 的类型被推断为 string
let z = true; // z 的类型被推断为 boolean
2. 函数返回值类型推断
TypeScript 可以根据函数体内的返回语句推断函数的返回类型。
function add(a: number, b: number) {
    return a + b; // 返回类型被推断为 number
}
function greet() {
    return "hello"; // 返回类型被推断为 string
}
3. 参数类型推断
在回调函数中,TypeScript 可以根据上下文推断参数的类型。
const numbers = [1, 2, 3];
numbers.forEach(num => {
    console.log(num); // num 的类型被推断为 number
});
4. 数组类型推断
当你声明一个数组并初始化时,TypeScript 会根据数组中的元素推断数组的类型。
let list = [1, 2, 3]; // list 的类型被推断为 number[]
let names = ["Alice", "Bob", "Charlie"]; // names 的类型被推断为 string[]
5. 对象类型推断
当你创建一个对象并赋值时,TypeScript 会根据对象的属性推断出对象的类型。
let person = {
    name: "John",
    age: 30
}; // person 的类型被推断为 { name: string; age: number }
6. 上下文类型推断
TypeScript 可以根据上下文推断表达式的类型。例如,在事件处理程序中,TypeScript 可以推断事件对象的类型。
window.onmousedown = function(mouseEvent) {
    console.log(mouseEvent.button); // mouseEvent 的类型被推断为 MouseEvent
};
7. 类型保护和类型推断
TypeScript 使用类型保护(type guards)来在不同代码分支中细化类型。常见的类型保护包括 typeof 和 instanceof。
function printId(id: number | string) {
    if (typeof id === "string") {
        console.log(id.toUpperCase()); // 在这个分支中,id 的类型被推断为 string
    } else {
        console.log(id); // 在这个分支中,id 的类型被推断为 number
    }
}
8. 泛型类型推断
TypeScript 也能推断出泛型函数的类型参数。
function identity<T>(arg: T): T {
    return arg;
}
let output1 = identity("myString"); // T 被推断为 string
let output2 = identity(42); // T 被推断为 number
9. 类属性类型推断
在类中,TypeScript 可以根据构造函数中的初始化推断属性的类型。
class Point {
    x = 0; // x 的类型被推断为 number
    y = 0; // y 的类型被推断为 number
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}
let point = new Point(10, 20); // point 的类型为 Point
总结
通过类型推断,TypeScript 编译器能够自动确定大多数变量和表达式的类型,从而减少显式类型注释的需求。这不仅提高了代码的可读性,还减少了样板代码,使开发更加高效。尽管如此,在一些复杂场景下,明确类型注释仍然是必要的,以确保类型安全和代码的清晰性。