TypeScript泛型

最新推荐文章于 2024-11-04 16:17:23 发布

爱问的艾文

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量171

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/u012764358/article/details/133685124

版权

本文介绍了如何在TypeScript中使用泛型定义一个函数，允许传入不同类型的参数并保持类型安全。通过泛型的使用，可以在定义时不指定具体类型，调用时动态指定，增强了代码的灵活性和类型保护。

摘要由CSDN通过智能技术生成

引言
TypeScript （以下简写为TS）是一门强类型的数据语言，能够进行静态类型的检查，这也是TS备受欢迎的一大原因；

假如我需要写一个函数，入参可以传入不同的类型，并且要求函数返回值也是传入参数的类型的话，应该怎么定义这个函数呢？
可能在没有接触泛型之前，你会不加思考的说出指定any 类型。当然就目前的问题是可以解决的，但是和TS 的类型保护的优势就相冲突了。

function hello(anyThing:any):any{
	return anyThing;
}

当我们去调用这个函数获取结果赋给一个变量时，编译器对这个变量就无法进行代码提示了。
为了保持TS 的类型保护优势，同时解决上述问题，就可以采用泛型来进行解决

泛型

官方的定义是：在定义函数、接口或者是类的时候，不预先指定具体的类型，而是在使用的时候再指定类型的一种特性。猛一看很抽象，但是我们只需要记住两个时间点：

上文提出的问题就可以使用泛型进行如下优化了：

function hello<T>(anyThing:T):T{
	return anyThing;
}

这里多出了<T> 我们可以理解为这个尖括号只是类型的占位符调用的时候把调用时的数据类型替换就行了，这里的T 可以理解为 type 的缩写，是可以任意自己替换的，比如你可以写成 “SHA” 都可以。

hello<string>("我是字符串");//"我是字符串"
hello<number>(100);//100
hello<number|boolean>(true);//true

上述例子便是函数泛型的示例，还支持多个参数

function test<T,U>(arg1:T,arg2:U):Object{
    return {arg1,arg2};
}

相信经过上述的例子大家对泛型的理解应该没问题了，当然可以自己尝试写一下接口泛型和类泛型啦。

关注