JavaScript 中怎么在 TypeScript 中使用泛型约束限制传入的数据结构-js教程-PHP中文网

typescript泛型约束通过extends限定类型参数结构，支持接口约束、交叉类型组合、keyof键名校验及构造签名限制。

javascript 中怎么在 typescript 中使用泛型约束限制传入的数据结构

在 TypeScript 中，泛型约束（Generic Constraints）通过 extends 关键字限定类型参数必须满足某个结构或继承自某个类型，从而确保泛型函数或类能安全地访问传入值的特定属性或方法。

用 `extends` 限制必须包含某些字段

当你希望泛型类型 T 至少有 id 和 name 属性时，可以定义一个接口并用 extends 约束：

interface HasIdName {
  id: number;
  name: string;
}

function logIdAndName<t extends hasidname>(item: T): void {
  console.log(`ID: ${item.id}, Name: ${item.name}`);
}

// ✅ 正确：满足约束
logIdAndName({ id: 1, name: "Alice", age: 30 });

// ❌ 报错：缺少 name 属性
// logIdAndName({ id: 2 });</t>

用交叉类型（&）组合多个约束条件

如果需要同时满足多个结构（比如既有 id，又可调用 toString()），可用交叉类型增强约束：

function processItem<t extends id: number tostring string>(x: T) {
  return `Item ${x.id}: ${x.toString()}`;
}</t>

这样 T 就既要有 id: number，又要实现 toString 方法（如 class 实例或 string 自身）。

Add Typescript Best Practices

在 CLAUDE.md 中配置 TypeScript 最佳实践和代码风格规则

下载

用 keyof 和索引访问进一步约束键名

当泛型需要操作对象的某个具体字段时，可把键也作为泛型参数，并用 K extends keyof T 确保键合法：

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

const user = { name: "Bob", score: 95 };
getProperty(user, "name"); // ✅ string
getProperty(user, "age");  // ❌ 编译报错</t>

用构造签名约束必须是类类型

若泛型需接受“能被 new 调用的类”，可用 new () => T 约束：

function createInstance<t>(Ctor: new () => T): T {
  return new Ctor();
}

class Person {
  name = "default";
}
createInstance(Person); // ✅ 返回 Person 实例</t>

也可结合 extends 要求该类还实现某接口：

interface Loggable {
  log(): void;
}

function createLogger<t extends loggable>(Ctor: new () => T): T {
  const instance = new Ctor();
  instance.log();
  return instance;
}</t>