一文理解TS泛型
当我们在编写 TypeScript 代码时,经常会遇到需要通用(Generic)的情况,这时候,泛型就是我们的好帮手了。在本篇文章中,我们将深入介绍 TypeScript 泛型的概念以及如何使用。
什么是泛型?
在编程语言中,泛型指的是参数化类型的概念。也就是说,我们可以定义一个函数、接口或类等,能够处理不同类型的数据,而不是只能处理一种类型的数据。这使得我们的代码更加灵活、通用、可复用。
下面是一个简单的泛型函数的例子:
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("hello world");
console.log(output); // 输出 hello world
上面这个函数用于返回的值与传入的参数类型相同,这类函数通常称为 Identity 函数。这里使用了 <T>
来代表泛型类型,在函数声明时,我们用具体类型替换了 <T>
,使得函数可以处理任意类型的数据。
泛型类
我们也可以编写在类中使用泛型的代码。下面是一个简单的例子:
class Queue<T> {
private list: T[] = [];
push(item: T) {
this.list.push(item);
}
pop() {
return this.list.shift();
}
}
let queue = new Queue<string>();
queue.push("first element");
queue.push("second element");
console.log(queue.pop()); // 输出 first element
console.log(queue.pop()); // 输出 second element
在这个例子中,我们定义了一个 Queue 类,它使用了泛型类型 T
,表示队列中元素的类型。我们可以通过调用 push()
和 pop()
方法来添加和移除元素。
泛型类型约束
有时候,我们希望泛型所代表的类型必须满足一定的条件,这个时候我们可以通过添加类型约束来实现。下面是一个简单例子:
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
loggingIdentity("hello"); // 输出 5
在上面的例子中,我们定义了一个泛型函数 loggingIdentity
,它接受一个参数 arg
,该参数的类型必须是一个具有 length
属性的对象。我们通过 extends
关键字来实现类型约束。
在泛型中使用类型别名
在 TypeScript 中,我们还可以使用类型别名来定义泛型类型。下面是一个简单的例子:
type Coordinate = [number, number];
function distance(a: Coordinate, b: Coordinate): number {
const [x1, y1] = a;
const [x2, y2] = b;
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}
console.log(distance([0, 0], [3, 4])); // 输出 5
在上面的例子中,我们定义了一个类型别名 Coordinate
,它是一个元组类型,包含两个数字。然后我们定义了一个 distance
函数,它接受两个 Coordinate
类型的参数,并计算两点之间的距离。
总结
在本篇文章中,我们深入介绍了 TypeScript 中泛型的概念,以及提供了一些实际应用的例子。泛型是一个非常强大且常用的特性,它可以使我们的代码更加通用、灵活以及可复用。希望通过本篇文章的介绍,你能够更加深入地理解 TypeScript 中的泛型。
最新文章
- ASP.NET OAuth:解决refresh token无法刷新access token的问题
- MXNet学习~试用卷积~跑CIFAR-10
- POJ 1273 网络流(最大流)模板
- CAD打开文件总是弹出要求选择字体怎么办
- 菜鸟学习WCF笔记-概念
- 【使用 DOM】使用 Document 对象
- Xposed知识
- Python 的“+”和append在添加字符串时候的区别
- 03_Weblogic之配置简单域:启动和配置域,使用模板创建域,使用控制台
- Promise (1) 如何使用Promise
- 放球游戏B
- Linux环境——MySQL安装及配置(8.0版本)
- JMeter&#160;关于JMeter&#160;正则表达式提取器的一点研究
- spring boot 系列之一:spring boot 入门
- C++下的命名空间
- svn新增文件时自动给文件设置强制只读属性needs-lock
- coding云(git)远程创建版本库和上传文件
- 验证码显示不出来,在THINKPHP中的使用
- 【Android】Scrollview 相关问题汇总
- UVA-1336 Fixing the Great Wall(区间DP)
热门文章
- Windows10远程桌面连接CentOS7图形化桌面
- 121、商城业务---订单服务---rabbitmq消息积压、丢失、重复等解决方案
- SAN证书(转载)
- 读书笔记<;<;世界是部金融史>;>;
- el-scrollbar element-ui的滚动条组件(官方文档没有写出来)
- 谷歌翻译不能用解决办法(谷歌翻译关闭后,如何继续使用Chrome浏览器的翻译功能?)
- spring-boot-starter-webflux
- MySQL学习(四)锁机制
- TypeScript 学习笔记 — infer 类型推导、类型兼容 (九)
- InstructPix2Pix: 动动嘴皮子,超越PS