前端面试题103（在TypeScript中，您如何定义和使用泛型（Generics）？请分享一些实际的使用场景）

在TypeScript中，泛型（Generics）是一种允许函数、接口、类等在定义时不指定具体类型，而在使用时指定类型的一种特性。这为创建可重用的组件提供了极大的灵活性，同时保持了类型安全。下面是如何定义和使用泛型的示例，以及一些实际的应用场景。

定义泛型函数

function identity<T>(arg: T): T {
    return arg;
}

// 使用示例
let output = identity<string>("hello"); // output 的类型为 string

在这个例子中，<T>声明了一个类型参数T。函数identity接受一个类型为T的参数，并返回相同类型的值。调用该函数时，可以通过尖括号语法指定具体的类型，如identity<string>。

泛型接口

interface Dictionary<T> {
    [key: string]: T;
}

// 使用示例
const dict: Dictionary<number> = {
    age: 25,
    score: 88
};

这里定义了一个泛型接口Dictionary，它是一个对象，其属性值可以是任何类型T。通过Dictionary<number>，我们创建了一个只能存储数字值的字典。

泛型类

class GenericClass<T> {
    private value: T;
    
    constructor(val: T) {
        this.value = val;
    }
    
    getValue(): T {
        return this.value;
    }
}

// 使用示例
const myGeneric = new GenericClass<string>("Hello, TypeScript!");
console.log(myGeneric.getValue()); // 输出: Hello, TypeScript!

这个例子展示了如何定义一个泛型类GenericClass，它有一个私有成员value和两个方法：构造函数用于初始化value，getValue用于获取它的值。实例化时指定了类型参数为string。

实际应用场景

1. 集合操作：在处理数组或对象集合时，泛型可以帮助确保集合中的元素类型一致，提高代码的安全性。

   function map<T, U>(arr: T[], callback: (item: T) => U): U[] {
       return arr.map(callback);
   }
   

2. 创建可复用的组件：在React等库中，泛型可以用来创建可以处理多种数据类型的组件，使得组件更加灵活且类型安全。

   interface Props<T> {
       data: T[];
       renderItem: (item: T) => JSX.Element;
   }
   
   const ListComponent = <T,>({ data, renderItem }: Props<T>) => (
       <ul>
           {data.map(renderItem)}
       </ul>
   );
   

3. 工具函数和库开发：开发库时，泛型使得函数和类能够适应更广泛的需求，而不必为每种可能的类型编写特定版本。

通过这些示例和应用场景，可以看出泛型在TypeScript中是非常强大的特性，它提高了代码的重用性和类型安全性。