Typesrcipt泛型约束详细解读

代码示例:

TypeScript 复制代码
// 如果我们直接对一个泛型参数取 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函数体部分,通过返回 xlength 属性值来获取传入对象的长度。由于在类型参数上添加了 extends ILength的约束,TypeScript 编译器能够确保x 具有length 属性,从而避免了直接对泛型参数取 length 属性可能导致的类型错误。
相关推荐
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix17 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端17 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧17 小时前
Promise 的使用
前端·javascript
NBtab18 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端