TypeScript泛型与非泛型函数差异及泛型应用场景问询

一、两段代码的本质差异 #

第一段：绑定固定类型的普通函数 #

interface Type1 {
  name: string,
  age: 23
}

const function1 = (each: Type1) => {
   // some logic...
   return 'something';
}

function1的参数被固定为Type1类型，只能接收符合该接口结构的数据，完全不支持其他类型。

第二段：无约束泛型函数（注意重名坑） #

interface Type2 {
  name: string,
  age: 23
}

const function2 = <Type2>(each: Type2) => {
   // some logic...
   return 'something';
}

这里的<Type2>是泛型参数，它和下面的interface Type2重名了——此时泛型参数会覆盖接口名，两者没有任何关系（换成<T>效果完全一致）。

所以function2是无约束泛型函数：它可以接收任意类型的参数（数字、字符串、对象、甚至undefined），参数类型由调用时动态决定，不是固定的。

举个实际调用的例子：

// 合法：只能传Type1类型
function1({name: "张三", age: 23})

// 全合法：任意类型都能传
function2(123)
function2("hello")
function2({name: "李四", age: 25})

二、无约束泛型的适用场景 #

无约束泛型的核心是处理与类型无关的通用逻辑，常见使用场景：

• 恒等函数：比如你写的genericTest，只返回参数本身，不需要关心参数类型，但能保留原始类型信息：

  const genericTest = <T>(arg: T): T => { return arg; };
  // result1的类型是Test1，不是any，类型信息完整保留
  const result1 = genericTest<Test1>({ name: 'vishnu', age: 29 });
  

• 通用工具函数：比如日志打印、缓存逻辑，只需要接收参数执行通用操作，不需要访问参数的特定属性：

  // 支持打印任意类型，同时保留类型提示
  const log = <T>(data: T): void => console.log(data);
  

• 泛型体系的基础实现：有些函数当前逻辑不需要约束，但后续可以通过extends添加约束来适配更具体的场景，无约束版本可以作为最通用的基础。

三、无约束泛型函数内部的参数处理 #

无约束泛型T代表任意类型，所以函数内部只能做所有TypeScript类型都支持的操作：

• 直接返回参数（比如恒等函数）
• 使用所有类型共有的方法/属性：比如toString()、valueOf()，或者用typeof判断类型
• 绝对不能直接访问特定类型的属性（比如arg.name），因为TypeScript无法确定T是否包含该属性——这就是你的genericTest2报错的原因：

  // 报错：Property 'name' does not exist on type 'T'
  const genericTest2 = <T>(arg: T): T => { console.log(arg.name); return arg; };
  

如果需要访问特定属性，有两种解决方式：

1. 添加泛型约束：用extends限定T必须符合某个接口，比如你的genericTest1：

   interface Test1 {
       name: string,
       age: number
   }
   const genericTest1 = <T extends Test1>(arg: T): T => { 
     console.log(arg.name); // 合法，因为T必然包含name属性
     return arg; 
   };
   

2. 使用类型守卫缩小范围：在函数内部通过typeof、instanceof或自定义类型守卫来确定T的具体子类型：

   const genericTest3 = <T>(arg: T): T => {
     if (typeof arg === 'object' && arg !== null && 'name' in arg) {
       console.log((arg as {name: string}).name); // 类型断言缩小范围
     }
     return arg;
   };
   

四、自定义泛型Array.find的意义 #

你写的customFind完美体现了泛型的核心价值：一次实现，支持所有类型数组。如果不用泛型，你需要为每种数组类型单独写一个customFind：

• 处理number[]的版本
• 处理string[]的版本
• 处理Test1[]的版本

而用泛型后，customFind可以自动适配数组的元素类型，调用时TypeScript会自动推断回调函数的参数类型（比如number[]调用时，each自动是number类型），返回值类型也会正确推断为number | undefined，全程保证类型安全。

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