fe-interview icon indicating copy to clipboard operation
fe-interview copied to clipboard

[TypeScript] 第1516天 在TypeScript中如何支持类型推断?

Open haizhilin2013 opened this issue 2 years ago • 1 comments

第1516天 在TypeScript中如何支持类型推断?

3+1官网

我也要出题

haizhilin2013 avatar Jun 09 '23 20:06 haizhilin2013

在 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)来在不同代码分支中细化类型。常见的类型保护包括 typeofinstanceof

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 编译器能够自动确定大多数变量和表达式的类型,从而减少显式类型注释的需求。这不仅提高了代码的可读性,还减少了样板代码,使开发更加高效。尽管如此,在一些复杂场景下,明确类型注释仍然是必要的,以确保类型安全和代码的清晰性。

llccing avatar Jun 28 '24 07:06 llccing