TypeScript 泛型问题：泛型约束与类型推断

TypeScript 泛型是编写复用性强的代码的关键，但在使用过程中常遇到两个主要问题：过于宽泛导致无法访问特定属性，以及类型推断不精准导致代码冗余。通过泛型约束与类型推断的结合，可以精确控制类型范围并让编译器自动识别类型。

一、 理解基础约束：解决“属性不存在”的错误

直接使用泛型 T 时，TypeScript 默认 T 可以是任何类型，因此不敢随意访问其属性。若尝试访问 T 的 length 或 id 等属性，编辑器会报错。

定义一个接口来描述约束条件，明确告诉编译器泛型 T 必须具备哪些特征。

// 定义具有 length 属性的接口
interface HasLength {
  length: number;
}

// 使用 extends 关键字约束泛型 T 必须包含 length 属性
function logLength<T extends HasLength>(arg: T): number {
  // 现在 TypeScript 确定 arg 一定有 length 属性
  return arg.length;
}

传入符合约束的参数进行调用。

logLength("hello world"); // 字符串有 length 属性，推断 T 为 string
logLength([1, 2, 3]);    // 数组有 length 属性，推断 T 为 number[]
logLength({ length: 10, value: "abc" }); // 对象显式包含 length 属性，合法

// logLength(100); // 报错：数字类型没有 length 属性，不满足约束

二、 进阶约束：使用 keyof 确保属性存在

当函数需要获取对象的某个属性值时，单纯使用泛型无法保证传入的“属性名”确实存在于该对象上。这需要结合 keyof 操作符进行双重约束。

编写一个安全的属性获取函数，确保传入的键 key 必须是对象 obj 的键之一。

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

调用该函数时，TypeScript 会自动检查传入的 key 是否对应 obj 的属性。

const user = {
  name: "Alice",
  age: 25,
  isAdmin: true
};

// 正确推断
const userName = getProperty(user, "name"); // 类型推断为 string
const userAge = getProperty(user, "age");   // 类型推断为 number

// 报错：类型 '"email"' 的参数不能赋给类型 '"name" | "age" | "isAdmin"' 的参数
// const email = getProperty(user, "email");

三、 优化类型推断：让代码更简洁

类型推断是指 TypeScript 根据传入的参数自动确定泛型的具体类型。良好的泛型设计可以让调用者省去显式声明类型的麻烦。

对比显式指定类型与自动推断的区别。

构建一个合并两个对象的函数，利用推断自动生成返回类型。

function merge<T, U>(obj1: T, obj2: U) {
  return {
    ...obj1,
    ...obj2
  };
}

执行合并操作，观察变量类型。

const mergedObj = merge({ name: "John" }, { age: 30 });

// 此时 mergedObj 的类型被自动推断为：
// {
//   name: string;
//   age: number;
// }

// 无需写成：
// const mergedObj = merge<{name: string}, {age: number}>({ name: "John" }, { age: 30 });

四、 处理推断失效的场景：默认参数与上下文

有时传入的参数可能不足以推断出类型，或者需要更灵活的默认类型。此时可以为泛型指定默认值。

指定泛型默认值为 string，并允许在没有参数传入时也能工作。

function createList<T = string>(item: T): T[] {
  return [item];
}

// 推断 T 为 number
const numList = createList(100);

// 推断 T 为 boolean
const boolList = createList(true);

// 没有参数时，使用默认类型 string（此场景下通常与默认参数值配合，但泛型默认值本身是一个独立特性）
// 注意：此处仅为演示泛型默认值语法，实际调用时若 item 必须传递，则 T 会被推断为参数类型

在某些复杂回调场景中，利用“上下文归类”可以让编译器根据参数位置推断类型。

定义一个事件处理函数，利用上下文推断参数类型。

type EventCallback<T> = (event: T) => void;

function onEvent<T>(callback: EventCallback<T>) {
  // 模拟触发事件
  const eventData = {} as T; 
  callback(eventData);
}

// 调用时，编译器根据回调函数的参数结构推断 T
onEvent((e) => {
  // 此时推断 e 为 any (因为缺乏上下文约束)
  console.log(e);
});

// 配合泛型约束使用
interface MouseEvent {
  x: number;
  y: number;
}

// 显式传入泛型，锁定 e 的类型
onEvent<MouseEvent>((e) => {
  console.log(e.x); // 类型安全，知道 e 有 x 属性
  console.log(e.y); // 类型安全
});

五、 泛型约束与推断的配合逻辑

泛型约束限制了输入范围，类型推导利用输入确定输出。两者的工作流程如下：

掌握核心逻辑：先由 extends 过滤掉非法输入，再由 = 或参数值确定最终类型。

编写一个包含多重约束的示例：要求对象必须有 id，且必须是数字，并返回该对象。

interface Identifiable {
  id: number;
}

function processEntity<T extends Identifiable>(entity: T): T {
  console.log(`Processing ID: ${entity.id}`);
  // 可以安全地访问和操作 entity.id
  return entity;
}

const product = { id: 101, category: "book" };

// 自动推断 T 为 { id: number; category: string; }
const processed = processEntity(product);
console.log(processed.category); // 推断保留，依然有 category 属性

遵循上述步骤与规范，在编写泛型代码时始终明确两点：第一，添加必要的 extends 约束以明确能力边界；第二，依赖 TypeScript 的推断能力减少冗余的类型标注，仅在推断确实无法满足需求时（如复杂的泛型工厂函数）才手动指定尖括号内的类型。