草庐IT

一文理解TS泛型

CodeForBetter 2024-01-14 原文

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

一文理解codelanguage-typescript的Vue

有关一文理解TS泛型的更多相关文章

  1. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  2. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  3. ruby - 易于初学者理解的 Ruby 库 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭3年前。Improvethisquestion我正处于学习Ruby的阶段，我想查看一些小型库的源代码以了解它们是如何构建的。我不知道什么是小型图书馆，但希望SO能推荐一些易于理解的图书馆来学习。因此，如果有人知道一两个非常小的库，这是新手Rubyists学习的好例子，请推荐!我想使用Manveru'sInnatelib，因为它试图保持在2000LOC以下，但我还不熟悉其中经常使用的Ruby速记。也许大约100-5

  4. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  5. ruby - 如何理解 Ruby 中的发送者和接收者？ - 2

    我很难理解Ruby中sender和receiver的实际含义。它们一般是什么意思？到目前为止，我只是将它们理解为方法调用和获取其返回值的调用。但是，我知道我的理解还远远不够。谁能给我一个Ruby中发送者和接收者的具体解释？ 最佳答案 面向对象中的一个核心概念是消息传递和早期概念化，这在很大程度上借鉴了计算的Actor模型。艾伦·凯(AlanKay)创造了面向对象一词并发明了最早的OO语言之一SmallTalk，他拥有voicedregretatusingatermwhichputthefocusonobjectsinsteadofo

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. ruby - 你如何理解 Ruby 中的这个三元条件？ - 2

    我在某些代码中遇到了三元组，但我无法理解条件:str.split(/',\s*'/).mapdo|match|match[0]==?,?match:"somestring"end.join我确实理解我是在某些点上拆分字符串并将总结果转换为数组，然后依次处理数组的每个元素。除此之外，我不知道发生了什么。 最佳答案 一种(稍微)不那么令人困惑的写法是:str.split(/',\s*'/).mapdo|match|ifmatch[0]==?,matchelse"somestring"endend.join我认为多行三元语句很糟糕，尤其是

  8. ruby - 您如何将 S3 理解为 Ruby 中的分层目录结构？ - 2

    有没有人成功地将S3存储桶读取为子文件夹？文件夹1--子文件夹2----文件3----文件4--文件1--文件2文件夹2--子文件夹3--文件5--文件6我的任务是读取文件夹1。我希望看到子文件夹2、文件1和文件2，但看不到文件3或文件4。现在，因为我将存储桶键限制为prefix=>'folder1/'，你仍然会得到file3和4，因为它们在技术上具有folder1前缀。似乎真正做到这一点的唯一方法是吸收folder1下的所有键，然后使用字符串搜索从结果数组中实际排除file3和file4。有没有人有过这方面的经验？我知道像Transmit和Cyber​​duck这样的FTP风格的S3

  9. 一文解决关于VLAN所有的疑惑 - 2

    一文解决关于VLAN所有的疑惑VLAN基本概念为什么需要VLAN？怎么在交换机上划分VLAN，VLAN的工作原理有了子网，已经隔离了广播，还需要VLAN干啥？只进行子网划分，不进行VLAN划分VLAN划分与子网划分附加VLAN信息的方法VLAN划分交换机的端口类型（Access和Trunk）一、访问链接二、汇聚链接汇聚链接VLAN间通信为什么要进行VLAN间通信？路由器实现VLAN间通信路由器和交换机的连接方式通信细节三层交换机实现VLAN间通信加速VLAN间通信三层交换机与路由器三层交换机路由器路由器和交换机配合构建LAN的实例使用VLAN设计局域网的特点VLAN增加网络的灵活性不使用VLA

  10. 关于yolov5训练时参数workers和batch-size的理解 - 2

    关于yolov5训练时参数workers和batch-size的理解yolov5训练命令workers和batch-size参数的理解两个参数的调优总结yolov5训练命令python.\train.py--datamy.yaml--workers8--batch-size32--epochs100yolov5的训练很简单，下载好仓库，装好依赖后，只需自定义一下data目录中的yaml文件就可以了。这里我使用自定义的my.yaml文件，里面就是定义数据集位置和训练种类数和名字。workers和batch-size参数的理解一般训练主要需要调整的参数是这两个：workers指数据装载时cpu所使

随机推荐