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 属性可能导致的类型错误。
相关推荐
JamSlade16 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保16 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo121517 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux17 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied17 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果17 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Sheldon一蓑烟雨任平生18 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
rechol18 小时前
类与对象(中)笔记整理
java·javascript·笔记
Luffe船长18 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y18 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid