当前位置：首页 > article >正文

Typesrcipt泛型约束详细解读

article 2025/3/4 18:18:58

代码示例：

// 如果我们直接对一个泛型参数取 length 属性, 会报错, 因为这个泛型根本就不知道它有这个属性
(() => {
  // 定义一个接口,用来约束将来的某个类型中必须要有length这个属性
  interface ILength{
    // 接口中有一个属性length
    length:number
  }
  function getLength<T extends ILength>(x: T): number {
    return x.length
  }

  console.log(getLength<string>('终于等到你，还好我没放弃'))
  // console.log(getLength<number>(123))
})()

重要代码解析：

function getLength<T extends ILength>(x: T): number：定义了一个名为 getLength 的泛型函数。<T extends ILength> 是类型参数部分，其中 T 是类型参数，extends ILength 表示类型参数 T 必须是实现了 ILength 接口的类型，也就是 T 类型的对象必须具有 length 属性。
x: T 表示函数接受一个类型为 T 的参数 x。
: number 是函数的返回值类型声明，表示该函数将返回一个 number 类型的值。
return x.length：函数体部分，通过返回 x 的 length 属性值来获取传入对象的长度。由于在类型参数上添加了 extends ILength 的约束，TypeScript 编译器能够确保 x 具有 length 属性，从而避免了直接对泛型参数取 length 属性可能导致的类型错误。