当前位置: 首页 > news >正文

面试题-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

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

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

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

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

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

相关文章:

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

面试题-TS(6)&#xff1a;TypeScript 中的泛型是什么&#xff1f; 在TypeScript中&#xff0c;泛型&#xff08;Generics&#xff09;是一种强大的特性&#xff0c;它允许我们在编写可重用的代码时增加灵活性。泛型使得我们可以编写不特定数据类型的代码&#xff0c;从而提高代…...

QT DAY4

1.思维导图 2.手动完成服务器的实现&#xff0c;并具体程序要注释清楚 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QTcpSocket> #include <QMessageBox> #include <QList> #include <QD…...

最新Ai创作源码ChatGPT商用运营源码/支持GPT4.0+支持ai绘画+支持Mind思维导图生成

本系统使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到本系统&#xff01; 支持GPT3模型、GPT4模型Midjourney专业绘画&#xff08;全自定义调参&#xff09;、Midjourney以图生图、Dall-E2绘画Mind思维导图生成应用工作台&#xff08;Prompt&#xff09;AI绘画广场自定…...

一个go的支持多语言的error自动生成插件

大家好&#xff0c;我是peachesTao&#xff0c;今天给大家推荐一个go的支持多语言的error自动生成的插件&#xff0c;插件主页可以访问下方链接。 在一个多语言国际化的项目中&#xff0c;后端接口返回给前端的错误描述也需要国际化&#xff0c;我们来看一下后端给前端返回多语…...

wireshark抓包新手使用教程(超详细)

一、简介 Wireshark是一款非常流行的网络封包分析软件&#xff0c;可以截取各种网络数据包&#xff0c;并显示数据包详细信息。 为了安全考虑&#xff0c;wireshark只能查看封包&#xff0c;而不能修改封包的内容&#xff0c;或者发送封包。 wireshark能获取HTTP&#xff0c;也…...

平均列顺序对列排斥能的影响

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由5张二值化的图片组成&#xff0c;让A有6个1&#xff0c;B有4个1&#xff0c;并且让这10个1的位置没有重合。比较迭代次数的顺序。 其中有9组数据 差值结构 A-B 迭代次数 构造平均列 …...

微信小程序-处理ios无法播放语音的问题

背景 框架&#xff1a;tarovue3 问题&#xff1a;今天搞小程序语音播放功能&#xff0c;开放工具播放正常&#xff0c;但是到ios手机上调试时无法播放&#xff0c;在网上找到个好办法 解决方案 核心代码 Taro.setInnerAudioOption({obeyMuteSwitch: false // 解决有一些IOS无…...

区块链 2.0笔记

区块链 2.0 以太坊概述 相对于比特币的几点改进 缩短出块时间至10多秒ghost共识机制mining puzzle BTC:计算密集型ETH&#xff1a;memory-hard(限制ASIC) proof of work->proof of stake对智能合约的支持 BTC&#xff1a;decentralized currencyETH&#xff1a;decentral…...

深入理解Vue响应式系统:数据绑定探索

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

web流程自动化详解

今天给大家带来Selenium的相关解释操作 一、Selenium Selenium是一个用于自动化Web浏览器操作的开源工具和框架。它提供了一组API&#xff08;应用程序接口&#xff09;&#xff0c;可以让开发人员使用多种编程语言&#xff08;如Java、Python、C#等&#xff09;编写测试脚本&…...

什么是框架?为什么要学框架?

一、什么是框架 框架是整个或部分应用的可重用设计&#xff0c;是可定制化的应用骨架。它可以帮开发人员简化开发过程&#xff0c;提高开发效率。 项目里有一部分代码&#xff1a;和业务无关&#xff0c;而又不得不写的代码>框架 项目里剩下的部分代码&#xff1a;实现业务…...

什么是 Sass?

Sass 介绍 什么是 Sass&#xff1f; 官方标语 世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言。怎么理解这句话呢&#xff1f;我们平时写的 CSS 代码可以理解为静态样式语言&#xff0c;而 Scss 就是动态样式语言&#xff0c;何为动态&#xff1f;就是让你写 CSS 跟写 …...

Kotlin~Memento备忘录模式

概念 备忘录模式是一种行为型设计模式&#xff0c;用于捕获和存储对象的内部状态&#xff0c;并在需要时将对象恢复到之前的状态。 备忘录模式允许在不暴露对象内部实现细节的情况下&#xff0c;对对象进行状态的保存和恢复。 角色介绍 Originator&#xff1a;原发器&#x…...

单链表的多语言表达:C++、Java、Python、Go、Rust

单链表 是一种链式数据结构&#xff0c;由一个头节点和一些指向下一个节点的指针组成。每个节点包含一个数据元素和指向下一个节点的指针。头节点没有数据&#xff0c;只用于表示链表的开始位置。 单链表的主要操作包括&#xff1a; 添加元素&#xff1a;在链表的头部添加新…...

微信小程序 background-image直接设置本地图片路径,编辑器正常显示,真机运行不显示解决方法

项目场景 微信小程序&#xff0c;设置background-image直接设置本地图片路径。 问题描述 编辑器正常显示&#xff0c;真机运行不显示 原因分析 background-image只能用网络url或者base64图片编码。 解决方案 1、将本地图片转为网络url后设置到background-image上 例如&…...

SQLite Studio 连接 SQLite数据库

1、在SQLite中创建数据库和表 1.1、按WINR&#xff0c;打开控制台&#xff0c;然后把指引到我们的SQLite的安装路径&#xff0c;输入D:&#xff0c;切换到D盘&#xff0c;cd 地址&#xff0c;切换到具体文件夹&#xff0c;输入“sqlite3”&#xff0c;启动服务 1.2、创建数据库…...

【业务功能篇58】Springboot + Spring Security 权限管理 【中篇】

4.2.3 认证 4.2.3.1 什么是认证&#xff08;Authentication&#xff09; 通俗地讲就是验证当前用户的身份&#xff0c;证明“你是你自己”&#xff08;比如&#xff1a;你每天上下班打卡&#xff0c;都需要通过指纹打卡&#xff0c;当你的指纹和系统里录入的指纹相匹配时&…...

Docker挂载目录失败问题解决

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

css中隐藏页面中某一个元素有什么方法?

我们可以使用css的z-index属性&#xff0c;将元素的-index去给它设置一个负值&#xff0c;使它隐藏在其他元素的后面。使用css样式进行隐藏我们可以使用display这个属性。&#xff08;1&#xff09;使用display:none完全进行隐藏元素&#xff0c;并且不占据空间也不会影响页面布…...

Unity 多语言问题C#篇

DateTime.ToString()不同语言环境问题 问题描述&#xff1a;PlayerPrefs.SetString("timeKey", DateTime.Now.ToString());切换系统语言后DateTime.Parse(PlayerPrefs.GetString("timeKey"));报错FormatException: String was not recognized as a valid D…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...