【TypeScript】类型推断

当我们在TypeScript中声明变量但没有明确指定其类型时，TypeScript会尝试根据变量的值进行类型推断。这样可以帮助我们避免手动指定所有类型，使代码更简洁，同时也提供了更好的类型安全性。下面是一些关于类型推断的案例，详细描述每个案例的类型推断过程：

1. 基本类型推断
   typescript
   Copy code
   let x = 10; // TypeScript 推断 x 为 number 类型
   let y = “hello”; // TypeScript 推断 y 为 string 类型
   let z = true; // TypeScript 推断 z 为 boolean 类型
   在这个例子中，我们没有显式地给变量x、y和z指定类型，TypeScript会根据变量的初始值进行类型推断。

2. 数组类型推断
   typescript
   Copy code
   let numbers = [1, 2, 3]; // TypeScript 推断 numbers 为 number[] 类型
   let names = [“Alice”, “Bob”, “Charlie”]; // TypeScript 推断 names 为 string[] 类型
   TypeScript会检查数组中所有元素的类型，并根据元素类型推断出数组的类型。

3. 对象类型推断
   typescript
   Copy code
   let person = { name: “John”, age: 30 }; // TypeScript 推断 person 为 { name: string, age: number } 类型
   TypeScript会根据对象字面量中的键值对进行类型推断。

4. 函数返回值类型推断
   typescript
   Copy code
   function add(a: number, b: number) {
   return a + b;
   }
   在这个例子中，函数add的返回值没有显式地指定类型，但TypeScript会根据函数体中的return语句推断出返回值类型为number。

5. 联合类型推断
   typescript
   Copy code
   let value: number | string = Math.random() > 0.5 ? 42 : “hello”;
   在这个例子中，变量value的类型是联合类型number | string。TypeScript根据条件表达式的结果进行类型推断。

6. 参数类型推断
   typescript
   Copy code
   function greet(person: { name: string; age: number }) {
   return Hello, ${person.name}! You are ${person.age} years old.;
   }

let john = { name: “John”, age: 30 };
let greeting = greet(john);
在函数greet的参数中，我们没有明确指定类型，而是使用了一个匿名对象字面量类型。TypeScript会根据传入的john对象推断参数类型。

7. 上下文类型推断
   typescript
   Copy code
   window.addEventListener(“click”, (event) => {
   console.log(event.clientX);
   });
   在这个例子中，TypeScript会根据addEventListener函数的第二个参数，即事件处理程序的函数类型，推断event参数的类型为MouseEvent，因为它是鼠标事件的处理程序。

8. 使用泛型推断
   typescript
   Copy code
   function identity(arg: T): T {
   return arg;
   }

let result = identity(“hello”);
在这个例子中，函数identity使用了泛型T，当我们调用identity(“hello”)时，TypeScript会根据传入的参数类型推断泛型类型为string，因此result变量的类型也是string。

通过这些案例，你可以更好地理解TypeScript中类型推断的过程和机制。类型推断使得代码更灵活、简洁，同时还增加了代码的可读性和类型安全性。