首页 > 其他分享 >一文理解TS泛型

一文理解TS泛型

时间:2023-04-27 13:22:24浏览次数:30  
标签:TypeScript console 一文 TS 类型 arg 泛型 我们

当我们在编写 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 中的泛型。

标签:TypeScript,console,一文,TS,类型,arg,泛型,我们
From: https://www.cnblogs.com/pglin/p/17356042.html

相关文章

  • 使用rtsp相关流程记录(致健忘的自己)
    相关步骤打开项目下的python文件夹里面的exe文件,双击运行(运行rtsp-simple-server)弹出这样一个界面:在该界面打开的情况下,在idea的Terminal写入相关命令(运行rtsp-simple-server之后,写入命令实现推流)ffmpeg-re-stream_loop-1-iin.mp4-ccopy-frtsprtsp://localhost:85......
  • dba_segments与dba_extents
    好久没写博客了最近在忙的有几点1.RAC+ADG基于阿里云DBFS数据库文件系统,实验训练一周被告知项目内容可能会更改,只剩下ADG容灾。2.挖矿病毒提前防护,客户中毒较多,打了一片片的补丁。3.RAC集群宕机,原因查了两天,发现服务器本身问题,有点无语。4.拆分数据库内容优化及处理,之前没怎......
  • 【单例设计模式原理详解】Java/JS/Go/Python/TS不同语言实现
    简介单例模式(SingletonPattern)属于创建型设计模式,这种模式只创建一个单一的类,保证一个类只有一个实例,并提供一个访问该实例的全局节点。当您想控制实例数目,节省系统资源,并不想混用的时候,可以使用单例模式。单例有很多种实现方式,主要分为懒汉和饿汉模式,同时要通过加锁来避免线程......
  • 2022-04-26:给定一个数组componets,长度为A, componets[i] = j,代表i类型的任务需要耗时j
    2022-04-26:给定一个数组componets,长度为A,componets[i]=j,代表i类型的任务需要耗时j给定一个二维数组orders,长度为M,orders[i][0]代表i号订单下单时间orders[i][1]代表i号订单是哪种类型的任务,毫无疑问orders[i][1]<A一开始所有流水线都在0时刻待命,给定一个正数nums,表示流水......
  • [7625] 导读 一文看懂 Vue.j 3.0 的优化
    我们的课程是要解读Vue.js框架的源码,所以在进入课程之前我们先来了解一下Vue.js框架演进的过程,也就是Vue.js3.0主要做了哪些优化。Vue.js从1.x到2.0版本,最大的升级就是引入了虚拟DOM的概念,它为后续做服务端渲染以及跨端框架Weex提供了基础。Vue.js2.x发展了很......
  • ts简易网络请求封装
    utils/axios/type/axios.tsexporttypeErrorMessageMode="none"|"modal"|"message"|undefined;exportinterfaceRequestOptions{//SplicingrequestparameterstourljoinParamsToUrl?:boolean;//Formatrequestpa......
  • 使⽤泛型和索引器实现集合类MyLis
    1usingSystem;23namespace_01_调试和错误排查4{5classMyList<T>6{7privateT[]data=newT[4];8privateintcount=0;910//索引器11publicTthis[intindex]12{13......
  • As a restaurant owner, write a professional email to the supplier to get these p
    Asarestaurantowner,writeaprofessionalemailtothesuppliertogettheseproductseveryweek:Wine(x10)Eggs(x24)Bread(x12)DearSupplier,Ihopethismessagefindsyouwell.Mynameis[YourName],andIamwritingonbehalfofmyrestaurant......
  • struts2 登录(无验证)
    版本:struts-2.3.16.1开发工具:javaee版本的eclipse服务器:tomcat6新建工程,如图:要加的jar包如图:web.xml:<?xmlversion="1.0"encoding="UTF-8"?><web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/n......
  • oracle 高级分组 GROUPING SETS
    用SCOTT/TIGER登录。groupingsets就是对参数中的每个参数做group,也就是有几个参数做几次group。SQL:SELECTJOB,DEPTNO,SUM(SAL)FROMEMPGROUPBYGROUPINGSETS(JOB,DEPTNO);结果:......