TypeScript 类型推断
· 阅读需 4 分钟
类型声明是 TypeScript 的灵魂所在。但是，对于之前只接触过 JavaScript 的人，不是逢类型必加。类型推断可以让 TS 写的更像 JS，哈哈。
TypeScript 的类型推论机制可以自动推断变量、函数返回值、参数等的类型，使代码更加简洁，同时保持类型安全。这有助于减少显式类型注解的需求，提高开发效率。以下是 TypeScript 类型推论的一些关键用法和示例：
1. 变量类型推论
当你声明一个变量并对其进行初始化时，TypeScript 会根据赋值的值来推断变量的类型。
let number = 42; // TypeScript 推断 number 的类型为 number
let text = "Hello, world!"; // TypeScript 推断 text 的类型为 string
let isDone = true; // TypeScript 推 断 isDone 的类型为 boolean
2. 函数返回值类型推论
TypeScript 可以根据函数的返回值来推断其返回类型。
function add(a: number, b: number) {
return a + b; // TypeScript 推断返回类型为 number
}
3. 函数参数类型推论
在函数调用时，TypeScript 可以根据传递的实参来推断函数参数的类型，尤其是在使用回调函数时。
let numbers = [1, 2, 3];
numbers.forEach((number) => {
console.log(number); // TypeScript 推断 number 的类型为 number
});
4. 上下文类型推论
TypeScript 可以根据上下文来推断某些表达式的类型，例如事件处理器、回调函数等。
document.addEventListener("click", (event) => {
console.log(event.target); // TypeScript 推断 event 的类型为 MouseEvent
});
5. 泛型类型推论
在使用泛型函数或类时，TypeScript 可以根据传递的类型参数来推断具体的类型。
function identity<T>(arg: T): T {
return arg;
}
let output = identity("myString"); // TypeScript 推断 output 的类型为 string
6. 解构赋值类型推论
在解构赋值时，TypeScript 可以根据解构的对象或数组推断其类型。
let point = { x: 10, y: 20 };
let { x, y } = point; // TypeScript 推断 x 和 y 的类型为 number
示例：综合使用类型推论
以下是一个综合示例，展示了类型推论在变量、函数返回值、参数以及上下文中的应用：
// 变量类型推论
let age = 30; // TypeScript 推断 age 的类型为 number
// 函数返回值类型推论
function greet(name: string) {
return `Hello, ${name}`; // TypeScript 推断返回类型为 string
}
// 函数参数类型推论
let names = ["Alice", "Bob", "Charlie"];
names.forEach((name) => {
console.log(greet(name)); // TypeScript 推断 name 的类型为 string
});
// 上下文类型推论
window.addEventListener("resize", (event) => {
console.log(event.target); // TypeScript 推断 event 的类型为 UIEvent
});
总结
类型推论是 TypeScript 的强大特性之一，能够在不显式声明类型的情况下提供类型安全和自动补全。这使得代码更简洁，同时减少了类型注解的冗余，提高了开发效率。尽管类型推论可以处理大多数情况，但在某些复杂场景下，显式声明类型仍然是必要的，以确保代码的可读性和维护性。