面试题-TS(六):TypeScript 中的泛型是什么?

面试题-TS(6):TypeScript 中的泛型是什么?

在TypeScript中,泛型(Generics)是一种强大的特性,它允许我们在编写可重用的代码时增加灵活性。泛型使得我们可以编写不特定数据类型的代码,从而提高代码复用性和可读性。

一、什么是泛型?

泛型是一种类型参数化的方式,它允许我们在函数、类、接口等代码中定义一个或多个类型参数,而这些参数在使用时并不指定具体的数据类型。在调用函数或实例化类时,我们可以通过传递不同的数据类型来使用相同的泛型代码。

TypeScript中的泛型使用尖括号(<>)来表示,并可以使用任意标识符来表示类型参数。以下是一个简单的泛型函数的示例:

function identity<T>(arg: T): T {return arg;
}

在上面的示例中,<T>表示类型参数,它允许我们在函数调用时传递不同的数据类型。例如:

let result1 = identity<number>(42);      // result1的类型为number
let result2 = identity<string>("hello"); // result2的类型为string

通过泛型,我们可以灵活地使用相同的代码处理不同的数据类型,提高代码的复用性。

二、泛型函数

泛型函数是一种可以处理多种数据类型的函数。我们可以在函数定义时使用泛型类型参数,并在函数体内使用这些参数来操作数据。

以下是一个简单的泛型函数示例,用于交换两个值:

function swap<T>(a: T, b: T): void {let temp: T = a;a = b;b = temp;
}

在上面的示例中,我们使用泛型类型参数<T>来表示任意类型的数据。通过泛型,我们可以在调用函数时传递不同类型的数据,从而实现对不同数据类型的交换操作。

let num1 = 10;
let num2 = 20;
swap<number>(num1, num2);let str1 = "hello";
let str2 = "world";
swap<string>(str1, str2);

泛型函数的优势在于可以用于处理不同类型的数据,从而提高代码的复用性和灵活性。

三、泛型类

除了泛型函数,我们还可以使用泛型类。泛型类是一种可以接受不同类型参数的类。在类定义时使用泛型类型参数,并在类的属性、方法等成员中使用这些参数来处理数据。

以下是一个简单的泛型类示例,用于存储和获取元素:

class Container<T> {private element: T;constructor(element: T) {this.element = element;}getElement(): T {return this.element;}
}

在上面的示例中,我们使用泛型类型参数<T>来表示任意类型的数据。通过泛型类,我们可以实例化不同类型的Container对象,并存储和获取不同类型的数据。

let numContainer = new Container<number>(42);
console.log(numContainer.getElement()); // 输出:42let strContainer = new Container<string>("hello");
console.log(strContainer.getElement()); // 输出:"hello"

泛型类的优势在于可以用于创建可以存储和处理不同类型数据的类,增加了代码的复用性和灵活性。

四、泛型接口

另外,我们还可以使用泛型接口。泛型接口是一种定义可以接受不同类型参数的接口。在接口定义时使用泛型类型参数,并在实现接口时指定具体的类型。

以下是一个简单的泛型接口示例,用于定义可以存储和获取元素的容器:

interface IContainer<T> {getElement(): T;setElement(element: T): void;
}

在上面的示例中,我们使用泛型类型参数<T>来表示任意类型的数据。通过泛型接口,我们可以实现具体的容器类,并在类中定义存储和获取元素的方法。

class NumberContainer implements IContainer<number> {private element: number;constructor(element: number) {this.element = element;}getElement(): number {return this.element;}setElement(element: number): void {this.element = element;}
}class StringContainer implements IContainer<string> {private element: string;constructor(element: string) {this.element = element;}getElement(): string {return this.element;}setElement(element: string): void {this.element = element;}
}

通过泛型接口,我们可以在实现接口时指定具体的类型参数,从而实现对不同类型数据的处理。

let numContainer: IContainer<number> = new NumberContainer(42);
console.log(numContainer.getElement()); // 输出:42let strContainer: IContainer<string> = new StringContainer("hello");
console.log(strContainer.getElement()); // 输出:"hello"

泛型接口的优势在于可以用于定义可以处理不同类型数据的接口,增加了代码的复用性和可读性。

五、泛型约束

在使用泛型时,有时候我们希望对泛型类型参数加以约束,以限制其允许的数据类型。这时我们可以使用泛型约束。

以下是一个简单的泛型约束示例,用于计算数字数组的和:

function sum<T extends number>(arr: T[]): number {let total: number = 0;for (let num of arr) {total += num;}return total;
}

在上面的示例中,我们使用extends number来对泛型类型参数<T>进行约束,表示T必须是number类型或其子类型。通过泛型约束,我们可以确保只有数字数组才能通过该函数进行求和。

let numbers = [1, 2, 3, 4, 5];
let result = sum(numbers); // 输出:15

泛型约束的优势在于可以对泛型类型参数进行限制,增加了代码的安全性和可维护性。

六、在编写可重用的代码时使用泛型的好处

使用泛型的主要好处在于提高代码的复用性和灵活性。通过泛型,我们可以编写不特定数据类型的代码,使得这些代码可以适用于不同的数据类型。这样一来,我们不需要为每种数据类型编写重复的代码,从而减少了代码冗余。

泛型还可以增加代码的可读性和可维护性。当我们在编写泛型代码时,我们可以将代码逻辑和数据类型分离开来,使得代码更加清晰和易于理解。同时,泛型还可以在编译时进行类型检查,提前捕获潜在的类型错误,减少了运行时错误的可能性。

另外,泛型还使得我们可以更好地封装代码,隐藏内部实现细节。这样可以提高代码的安全性,并使得代码更易于维护和升级。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/9842.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s1.27.4最新版本使用kubeadm+containerd方式安装

k8s1.27.4 最新版本使用kubeadm+containerd方式安装 1、环境准备 [全部节点配置]1.1系统环境1.2主机配置1.2.1 主机名配置1.2.2 主机IP地址配置1.2.3 主机名与IP地址解析1.2.4 防火墙配置1.2.5 SELINUX配置1.2.6 时间同步配置1.2.7 禁用swap交换分区(kubernetes强制要求禁用)…

使用java.lang.Comparable实现比较器和使用java.util.Collections排序

记录&#xff1a;469 场景&#xff1a;使用java.lang.Comparable实现比较器&#xff0c;使用java.util.Collections排序&#xff0c;实现找出最大值。 版本&#xff1a;JDK 1.8,Spring Boot 2.6.3,fastjson-2.0.33。 1.一个JSON字符串&#xff0c;找出最大值 1.1JSON字符串…

Set 和 Map 数据结构

数据结构Set ES6提供了新的数据结构Set。它类似于数组&#xff0c;但是成员的值都是唯一的&#xff0c;没有重复的值。 Set本身是一个构造函数&#xff0c;用来生成Set数据结构。 // 数组去重 const set new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4]目前个人感觉Se…

.NET 5 Web API 中JWT详细教程:保护你的Web应用

第一部分&#xff1a; 理解JWT JSON Web Token&#xff08;JWT&#xff09;是一种在不同系统之间传递信息的安全方式。它由三部分组成&#xff1a;头部&#xff08;Header&#xff09;、载荷&#xff08;Payload&#xff09;和签名&#xff08;Signature&#xff09;。头部包…

SpringBoot 整合Docker Compose

Docker Compose是一种流行的技术&#xff0c;可以用来定义和管理你的应用程序所需的多个服务容器。通常在你的应用程序旁边创建一个 compose.yml 文件&#xff0c;它定义和配置服务容器。 使用 Docker Compose 的典型工作流程是运行 docker compose up&#xff0c;用它连接启动…

全面防护!Fortinet发布混合式部署防火墙HMF

在企业IT复杂性日益增长、网络安全威胁日趋紧迫、网络安全设施可维护性逐渐降低的背景下&#xff0c;企业迫切寻求可无缝跨越所有IT区域&#xff0c;有效简化企业防护架构的统一解决方案。近日&#xff0c; Fortinet Accelerate 2023中国区15城巡展圆满落幕&#xff0c;在收官之…

【深度学习之YOLO8】视频流推断

官方V8模型下载 需要准备两个东西 simsun.ttc字体包YOLOv8官方模型成品 ScreenCapture屏幕图像类 import cv2 import mss import numpy as npclass ScreenCapture:"""parameters----------screen_resolution : Tuple[int, int]屏幕宽高&#xff0c;分别为x&a…

【文献分享】比目前最先进的模型轻30%!高效多机器人SLAM蒸馏描述符!

论文题目&#xff1a;Descriptor Distillation for Efficient Multi-Robot SLAM 中文题目&#xff1a;高效多机器人SLAM蒸馏描述符 作者&#xff1a;Xiyue Guo, Junjie Hu, Hujun Bao and Guofeng Zhang 作者机构&#xff1a;浙江大学CAD&CG国家重点实验室 香港中文大学…

Vue系列第四篇:Vue2 + Element开发登录页面

Vue开发中Element是一个比较受欢迎的界面库&#xff0c;实际开发中Vue2搭配Element UI开发&#xff0c;Vue3搭配Element plus开发&#xff0c;今天就用Vue2 Element来开发登录页面。 目录 1.Element UI介绍 1.1官网 1.2element-ui安装 2.开发环境准备 2.1core-js安装 2…

List集合类详解(附加思维导图)

目录 一、List集合思维导图 二、List集合类的常见方法 2.1、ArrayList集合常用方法 2.2、LinkedList集合常用方法 一、List集合思维导图 二、List集合类的常见方法 2.1、ArrayList集合常用方法 ①.add(Object element) 向列表的尾部添加指定的元素。 ②.size() 返回列表中…

xxljob

调度中心&#xff1a; 下载调度中心的代码 下载sql&#xff0c;执行sql 更改配置 启动项目 输入地址即可访问界面 执行器&#xff1a; 新建springboot的项目&#xff0c;导入相关依赖 添加和执行器的配置 上面的就是读取配置文件的信息 把从配置文件获取的值set到对…

家政服务小程序制作攻略揭秘

想要打造一个家政服务小程序&#xff0c;但是又不懂编程和设计&#xff1f;不用担心&#xff01;下面将为你详细介绍如何利用第三方平台&#xff0c;从零开始打造一个家政服务小程序。 首先&#xff0c;你需要找到一个适合的第三方平台&#xff0c;例如乔拓云网。在乔拓云网的【…

Rman配置参数详解

using target database control file instead of recovery catalog指的是使用目标数据库控制文件代替恢复目录 1、CONFIGURE RETENTION POLICY TO REDUNDANCY 1; # default 设置rman备份过期条件&#xff1a;是用来决定那些备份不再需要了&#xff0c;它一共有三种可选项&…

进销存+小程序商城一体化,多门店管理解决方案-免费试用|亿发

为了适应市场变化和增强管理效率&#xff0c;越来越多的连锁&#xff0c;门店开始转向进销存小程序商城一体化&#xff0c;将进销存与订货商城结合&#xff0c;以实现更便捷、有效的经营模式&#xff0c;让企业迈向数字化时代。让我们一起来看看进销存小程序商城一体化系统相比…

MySQL索引失效原因及解决方案

MySQL索引失效原因及解决方案 在使用MySQL数据库时&#xff0c;索引是一种重要的性能优化工具。然而&#xff0c;有时候我们可能会遇到索引失效的情况。本文将介绍几种常见的MySQL索引失效原因以及相应的解决方案&#xff0c;并提供SQL语句的错误示例和正确示例。 1. 字符串字…

文本预处理——文本数据分析

目录 文本数据分析中文酒店评价语料获得训练集和验证集的标签数量分布获取训练集和验证集的句子长度分布获取训练集和验证集的正负样本长度散点分布获得训练集和验证集不同词汇总数统计获得训练集上正负的样本的高频形容词词云获得验证集上正负的样本的形容词词云 文本数据分析…

vue项目设计滚动条的第三方库

在Vue项目中&#xff0c;有几个可以用来实现自定义滚动条的第三方库。其中一些流行的库如下&#xff1a; 1.Vuescroll**&#xff1a;** Vuescroll 是一个功能丰富且高度可定制的滚动条解决方案&#xff0c;支持自定义滚动条样式和滚动行为。它可以应用于多种滚动场景&#xff0…

如何在APP开发中实现多平台兼容?

随着移动互联网的发展&#xff0c;各大 APP平台也如雨后春笋般崛起&#xff0c;现在市面上主流的 APP平台基本都已经支持 IOS、 Android、 WP等多个平台的开发&#xff0c;但对于一些只想专注于做一款 APP的企业来说&#xff0c;往往只能选择在一个平台开发一个 APP&#xff0c…

Kubernetes ConfigMap - Secret - 使用ConfigMap来配置 Redis

目录 ConfigMap &#xff1a; 参考文档&#xff1a;k8s -- ConfigMap - 简书 (jianshu.com) K8S ConfigMap使用 - 知乎 (zhihu.com) ConfigMap的作用类型&#xff1a; 可以作为卷的数据来源&#xff1a;使用 ConfigMap 来配置 Redis | Kubernetes 可以基于文件创建 Conf…

华为数通HCIP-ISIS高级

isis区域间的互访 1、L2区域 to L1区域 在L1区域发布的路由会以L1-LSP在L1区域内传递&#xff0c;到达L1-2路由器时&#xff0c;L1-2路由器会将该L1-LSP转换为L2-LSP在L2区域内传递&#xff1b; 因此L2区域的设备可以学习到L1区域的明细路由&#xff0c;进行访问&#xff1b;…