TypeScript中何时使用泛型参数？该示例里泛型约束与直接用接口数组有何区别？

一、两种写法的核心区别 #

你给出的两种写法都能确保传入的数组元素具备log方法，但关键差异在于类型信息的保留：

• 用Logable[]作为参数类型时，函数接收的数组会被视为Logable类型的集合，丢失了元素的原始具体类型。
• 用<T extends Logable>泛型约束时，函数会保留输入数组的原始类型，同时确保元素符合Logable的约束。

举个具体例子对比：

interface Logable {
  log: () => void;
}

class User implements Logable {
  log() { console.log('User log') }
  name: string = 'Alice';
}

// 泛型版本
function logItems<T extends Logable>(items: T[]): void {
  items.forEach(item => {
    item.log();
    // 因为泛型保留了User类型，这里可以安全访问name属性
    console.log(item.name); 
  });
}

// 非泛型版本
function logItemsSimple(items: Logable[]): void {
  items.forEach(item => {
    item.log();
    // 报错：Property 'name' does not exist on type 'Logable'
    console.log(item.name); 
  });
}

const users: User[] = [new User()];
logItems(users); // 正常运行
logItemsSimple(users); // 编译报错

你的想法完全正确：如果这个函数只需要调用log方法，不需要用到元素的其他类型信息，直接写Logable[]确实更简洁，没必要引入泛型。

二、何时该用TypeScript泛型参数 #

泛型的核心价值是类型复用和类型关联，以下几种场景适合用泛型：

• 需要保留输入类型的具体信息：比如数组的map函数，传入number[]要返回string[]，传入User[]要返回UserDTO[]，泛型能让函数自动适配输入类型，输出对应类型的结果。
• 约束多个参数/返回值的类型关联：比如一个getProperty函数，接收对象和它的属性名，返回属性值的类型。用泛型可以确保属性名确实属于对象的键，同时返回值类型和对象对应属性的类型一致。
• 开发通用工具/组件：比如实现一个栈（Stack）数据结构，泛型可以让栈支持存储任意类型的数据，同时保证入栈和出栈的类型一致；再比如React的通用列表组件，用泛型定义props，能让组件适配不同的数据类型。
• 避免重复定义相似类型：如果有多个逻辑一致但处理类型不同的函数/类，泛型可以帮你抽象出通用的类型逻辑，不用为每个类型写重复代码。

内容的提问来源于stack exchange，提问作者opensas