TypeScript 类型推断

类型声明是 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 的强大特性之一，能够在不显式声明类型的情况下提供类型安全和自动补全。这使得代码更简洁，同时减少了类型注解的冗余，提高了开发效率。尽管类型推论可以处理大多数情况，但在某些复杂场景下，显式声明类型仍然是必要的，以确保代码的可读性和维护性。