TypeScript - 泛型 - 泛型方法中泛型的使用

对泛型的一个自我理解

复制代码
泛型的使用,实际上就像一个占位符一样,
我先预定义一个类型,这个类型具体是啥只有在真正使用的时候才知道。

从某种角度来看,泛型很像这个 any 类型啊。

泛型的定义语法

复制代码
泛型的定义使用 <T> 的方式来定义,
其中 T 就是你与定义的类型,这个字母可以随便用,无所谓,只是一个符号而已。

泛型定义的时候可以定义多个,只需要在<>中用 逗号隔开就可以。
例如 : <A,B>

写一个常规的泛型方法看看

复制代码
需求描述 :
    写一个函数,
    两个参数,参数1 是泛型类型的,参数2 是一个数字;
    返回值是 创建【参数2】个 【参数1】 的数组。

代码实现如下:
ts 复制代码
// 泛型方法的定义 <T> 声明了一个泛型,在参数列表中、方法体中可以使用这个泛型。
function getArry<T> (value:T,count:number):T[]{
    let arr:T[] = []
    for(let i = 0;i < count;i++){
        arr.push(value)
    }
    return arr
}


// 使用的时候指明范型的类型
console.log(getArry<number>(100,3))
// 使用类型推断自行决定泛型的类型
console.log(getArry("aabbcc",3))
复制代码
运行结果如下 :
[ 100, 100, 100 ]
[ 'aabbcc', 'aabbcc', 'aabbcc' ]

泛型方法的其他写法(了解)

复制代码
因为函数有 函数声明 和 函数表达式 的定义方式。
上面的案例使用的是 函数声明的方式 使用的泛型,
下面 使用 函数表达式的方式 使用一下泛型,实现的效果与上面的案例是一致的。
ts 复制代码
// 函数表达式的方式
const getArry2 = function <T>(value:T,count:number):T[]{
    let arr:T[] = []
    for(let i = 0;i < count;i++){
        arr.push(value)
    }
    return arr
}

// 箭头函数的方式
const getArry3 = <T>(value:T,count:number):T[]=>{
    let arr:T[] = []
    for(let i = 0;i < count;i++){
        arr.push(value)
    }
    return arr
}

多个泛型参数的写法

复制代码
多个符号用逗号隔开即可,如 <T,U,B>
写个例子一看就明白了:
ts 复制代码
// 范型参数可以有多个,用逗号隔开
function getArry4<T,U> (value:T,value2:U,count:number):void{
	// 使用第一个泛型
    let arr:T[] = []
    for(let i = 0;i < count;i++){
        arr.push(value)
    }
	// 使用第二个泛型
    let arr2:U[] = []
    for(let i = 0;i < count;i++){
        arr2.push(value2)
    }

    console.log(arr)
    console.log(arr2)
 
}

// 使用一下
getArry4(100,"bcd",2)
复制代码
运行结果:
[ 100, 100 ]
[ 'bcd', 'bcd' ]
相关推荐
golang学习记1 分钟前
从0死磕全栈之使用 VS Code 调试 Next.js 应用完整指南
前端
shayudiandian3 分钟前
JavaScript性能优化实战
开发语言·javascript·性能优化
Mintopia3 分钟前
🧩 隐私计算技术在 Web AIGC 数据处理中的应用实践
前端·javascript·aigc
尘世中一位迷途小书童5 分钟前
代码质量保障:ESLint + Prettier + Stylelint 三剑客完美配置
前端·架构
Mintopia6 分钟前
🧭 Next.js 架构与运维:当现代前端拥有了“分布式的灵魂”
前端·javascript·全栈
尘世中一位迷途小书童16 分钟前
从零搭建:pnpm + Turborepo 项目架构实战(含完整代码)
前端·架构
JarvanMo25 分钟前
Flutter 中的 ClipRRect | 每日 Flutter 组件
前端
某柚啊26 分钟前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c27 分钟前
如何学习Lodash源码?
前端·javascript·学习
Damon小智30 分钟前
仓颉 Markdown 解析库在 HarmonyOS 应用中的实践
华为·typescript·harmonyos·markdown·三方库