一文理解TS泛型

这篇具有很好参考价值的文章主要介绍了一文理解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 中的泛型。文章来源地址https://www.toymoban.com/news/detail-426896.html

到了这里,关于一文理解TS泛型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用vscode编写并运行typescript代码

    1.安装vsCode Visual Studio Code - Code Editing. Redefined 2.安装nodejs 下载 | Node.js 中文网   3.打开vscode,在vscode里面打开终端(快捷键是ctrl+~)    查看是否成功安装node和npm:     node -v    npm -v    在终端中输入如下命令并运行:    npm install -g typescript    检查是否成功安装(typescri

    2024年02月09日
    浏览(34)
  • 我们在选择服务器的时候,经常会看到单线服务器,多线服务器和BGP服务器,那这些线路的服务器有存在哪些不同呢?

    我们在选择服务器的时候,经常会看到单线服务器,多线服务器和BGP服务器,那这些线路的服务器有存在哪些不同呢? 单线 所谓的单线服务器是单网卡单个IP,指只有电信、联通或者移动一条线路。 缺点:由于线路单一,所选线路为电信线路时,联通或移动的用户访问时可

    2024年02月12日
    浏览(37)
  • 「为什么代码要整洁?」——代码整洁度对于项目质量的影响,让我们通过这边文章来教你js和ts的代码整洁技巧,让你的项目更出众

    为什么代码要整洁? 代码质量与整洁度成正比。有的团队在赶工期的时候,不注重代码的整洁,代码写的越来越糟糕,项目越来越混乱,生产力也跟着下降,那就必须找更多人来提高生产力,开发成本越来越高。 整洁的代码是怎样的? 清晰表达意图、消除重复、简单抽象、

    2024年02月07日
    浏览(45)
  • 一文轻松实现在VSCode中编写Go代码

    1.下载并安装VSCode VSCode(Visual Studio Code)是一款免费且功能强大的开源代码编辑器。VSCode适用于Windows、macOS和Linux操作系统,提供了丰富的编辑功能,包括语法高亮、智能代码补全、代码导航、重构支持、代码片段、多光标编辑等。另外VSCode具有丰富的扩展生态系统,开发者

    2024年02月19日
    浏览(36)
  • 【TypeScript】TypeScript中的泛型

    定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。 举个例子: 上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和

    2024年02月09日
    浏览(37)
  • TypeScript中的泛型(泛型函数、接口、类、泛型约束)

    一、泛型函数 TypeScript 泛型是一种可以使代码具有更高的可重用性和泛化能力的特性 。通过泛型,我们可以定义一种通用的类型或函数,使其能够应对多种类型的输入。泛型在类、函数、接口等多种场景下都可以使用。 具体来说,在定义泛型函数时,我们可以使用来表示一

    2024年02月11日
    浏览(34)
  • 16.【TypeScript 教程】TypeScript 泛型(Generic)

    本节开始介绍 TypeScript 一些进阶知识点,第一个要介绍的泛型是 TypeScript 中非常重要的一个概念,它是一种用以增强函数、类和接口能力的非常可靠的手段。 使用泛型,我们可以轻松地将那些输入重复的代码,构建为可复用的组件,这给予了开发者创造灵活、可重用代码的能

    2024年01月18日
    浏览(33)
  • TypeScript 进阶之泛型

    避免代码重复和创建可重用类型是编写干净代码的重要部分。 将所有类型属性都设置为可选 Required 与 Partial 相反。它构造一个类型,其中需要该类型的所有属性。它可用于确保没有可选属性出现在类型中。 多属性的对象中摘取某些属性。 键可以是字符串文字或字符串文字的

    2024年01月23日
    浏览(30)
  • typeScript(泛型篇)

    软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中,可以使用 泛型 来创建可重用的组件,一个组件可以

    2024年02月10日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包