TypeScript泛型

news2024/12/30 2:21:09

什么是泛型?

"泛"就是广泛的意思,"型"就是数据类型。顾名思义,泛型就是适用于多种数据类型的一种类型。

泛型的作用

它能够帮助我们构建出复用性更强的代码

function getResult(value: number): number {
  return value
}

例如,我们希望传参类型和函数返回类型一致时。我们可以使用泛型。

使用泛型

function getResult<T>(value: T): T {
  return value
}

在定义一个函数时,不决定这些参数的类型,而是让调用者以参数的形式告知函数参数应该是什么类型。

<T>里的T便是TS的类型变量,也就是把T看做额外的一个参数,把类型参数化。

怎么传入泛型

函数定义时,<>的位置就是泛型的传入位置,比如上面函数的<T>。

getResult<number>(100) // 泛型收缩为数字

sum<{name: string}>({ name: "zs" }) // 泛型收缩为引用对象

或者我们可以让TS通过类型推导 自动识别:

getResult(100) 

sum({ name: "zs" }) 

 常用的泛型类型

  • T:Type的缩写,类型
  • K、V:key和value的缩写,键值对
  • E:Element的缩写,元素
  • O:Object的缩写,对象

泛型类型不是一定要使用T来表示类型。只是大家常用T表示类型。

TS允许引入希望定义的任何名字的类型变量。比如我们引入一个新的类型变量 U,重写上面getResult方法。

function getResult<U>(val:U):U{return val}
getResult<number>(100)

同时引入希望定义的任何数量的类型变量

function sumNew<U,A>(val:U,count:A):number{return 300}
sumNew(3,'ss')

泛型与接口

在定义接口的时候也可以使用泛型来对接口内的成员进行类型约束。

interface IInfo<T1, T2> {
  name: T1
  age: T2
}

使用泛型接口:

const info: IInfo<string, number> = {
  name: "zs",
  age: 25
}

泛型接口有类型默认值但是没有类型推导(函数传参不能使用,但是函数传参有类型推导)

// 泛型接口定义默认类型
interface IPerson<T1 = string, T2 = number> {
  name: T1
  age: T2
}

const p: IPerson = {
  name: "chenyq",
  age: 123
}

类型推导报错:

泛型与类

class Point<T> {
  x: T
  y: T
  z: T

  constructor(x: T, y: T, z: T) {
    this.x = x
    this.y = y
    this.z = y
  }
}
// 泛型类自动推导类型
const point1 = new Point("1.33.2", "2.22.3", "4.22.1")
// 泛型类明确泛型类型
const point2 = new Point<string>("1.33.2", "2.22.3", "4.22.1")
const point3: Point<string> = new Point("1.33.2", "2.22.3", "4.22.1")

泛型与数组

// 定义字符串数组
const arr1: string[] = ["a", "b", "c"]			
const arr2: Array<string> = ["a", "b", "c"]

泛型约束

泛型除了指定具体类型,还可以通过某类特征指定类型。

比如string和array都是有length的,或者某些对像也是会有length属性的。

我们想写一个函数,只接受含有length属性的参数,该怎么写?

定义一个接口,指定length属性

interface hasLength {
    length: number
}

用一个继承hasLength的接口做泛型约束:

function fn<T> (arg:T) {
    console.log(arg)
}
function fn<T extends hasLength> (arg:T) {
    console.log(arg)
}

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

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

相关文章

高效办公必备,批量重命名与翻译一气呵成

在电脑使用中&#xff0c;我们常常需要批量修改文件名或对文件进行翻译。这时候&#xff0c;有一个得力的工具可以助你一臂之力&#xff0c;那就是“固乔文件管家”。下面就教你如何使用这个软件&#xff0c;轻松完成批量重命名和翻译大量文件的操作。 首先&#xff0c;你需要下…

基于 Alpine 环境构建 aspnetcore6-runtime 的 Docker 镜像

关于 Alpine Linux 此处就不再过多讲述&#xff0c;请自行查看相关文档。 .NET 支持的体系结构 下表列出了当前支持的 .NET 体系结构以及支持它们的 Alpine 版本。 这些版本在 .NET 到达支持终止日期或 Alpine 的体系结构受支持之前仍受支持。请注意&#xff0c;Microsoft 仅正…

mysql技术文档--之与redo log(重做日志)庖丁解析-超级探索!!!

阿丹&#xff1a; 在刚开始写本文章的是还不太清楚要如何去细啃下这两个体系&#xff0c;在查阅资料的过程中。发现大厂阿里的庖丁解InnoDB系列&#xff0c;详细了的写了很多底层知识&#xff0c;于是基于这个这两个文章才有了阿丹的这篇文章。 整体认知&#xff1a; 在 MySQ…

数据结构——排序算法——插入排序

交换法插入排序 void swap(vector<int> arr, int i, int j) {int temp arr[i];arr[i] arr[j];arr[j] temp;}void insertSort(vector<int> arr) {// 从第二个数开始&#xff0c;往前插入数字for (int i 1; i < arr.size(); i) {// j 记录当前数字下标int j …

骨传导耳机的危害有哪些?会损害听力吗?

如果正常的使用&#xff0c;骨传导耳机是没有危害的&#xff0c;由于骨传导耳机独特的传声方式&#xff0c;所以并不会对人体造成损伤&#xff0c;还可以在一定程度上保护听力。 如果想更具体知道骨传导耳机有什么危害&#xff0c;就要先了解什么是骨传导耳机&#xff0c;骨传…

虚拟机Ubuntu操作系统常用终端命令(1)(详细解释+详细演示)

虚拟机Ubuntu操作系统常用终端命令 本篇讲述了Ubuntu操作系统常用的三个功能&#xff0c;即归档&#xff0c;软链接和用户管理方面的相关知识。希望能够得到大家的支持。 文章目录 虚拟机Ubuntu操作系统常用终端命令二、使用步骤1.归档1.1创建档案包1.2还原档案包1.3归档并压缩…

〔022〕Stable Diffusion 之 生成视频 篇

✨ 目录 &#x1f388; 视频转换 / mov2mov&#x1f388; 视频转换前奏准备&#x1f388; 视频转换 mov2mov 使用&#x1f388; 视频转换 mov2mov 效果预览&#x1f388; 视频无限缩放 / Infinite Zoom&#x1f388; 视频无限缩放 Infinite Zoom 使用 &#x1f388; 视频转换 /…

ACL(访问控制列表)

文章目录 一、ACL定义常见功能 二、基于ACL的包过滤定义包过滤的方向包过滤的工作流程注意事项 三、ACL分类四、常用命令 首先可以看下思维导图&#xff0c;以便更好的理解接下来的内容。 一、ACL 定义 ACL&#xff0c;也称为访问控制列表&#xff0c;是一种网络安全工具&…

8个免费的AI和LLM游乐场

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 在本文中&#xff0c;我们的目标是通过引入八个用户友好的平台来弥合这一差距&#xff0c;这些平台使任何人都可以免费测试和比较开源AI模型。此外&#xff0c;它们还提供多种更新型号&#xff0c;确保您及时了解最新进…

浅谈前后端分离的网络拓扑

前后端分离大体分为两种拓扑结构&#xff0c;前端和后端通过开放对外端口的拓扑结构和只有前端开放端口的拓扑结构 前端和后端通过开放对外端口的拓扑结构 比如说前端通过 80 端口对外提供服务&#xff0c;后端通过 8080 端口对外提供服务&#xff0c;前端和后端搭建在同一台服…

sqlserver2012 完全卸载

使用工具 我用的是64位的 双击打开 等待处理完成 输入sql 查询&#xff0c;对查询出来的程序选择批处理&#xff0c;进行批处理卸载 等待卸载完成&#xff0c;期间可能 需要多次点击确认

java授权码方案 软件实现时间授权 离线授权 夏末版

java项目在离线状态下部署到客户端,很容易被反编译,授权容易被破解, 给项目盈利带来很大的困难, 特别是小项目很容易失败, 小项目特别需要完善可靠的授权加密解决方案 本方案只需要集成一个jar包就可以实现在关键节点完成,授权验证,离线时间验证等功能,特别是个中小项目的开发…

解决three.js中加载纹理贴图时,初次渲染不显示的问题

效果&#xff1a; 解决方法&#xff1a;主要是将一些构建网格对象的操作放在了textureLoader.load()方法中&#xff0c;加载图片也用了require init() {// 1, 创建场景对象this.scene new this.$three.Scene();// 2, 创建立方缓冲几何体this.geometry new this.$three.BoxGe…

抖店产品曝光率低怎么解决?提高曝光、点击、转化的技巧,可收藏

我是王路飞。 我之前一直在强调&#xff0c;抖店的核心有且只有一个&#xff0c;就是选品。 店铺内的所有问题&#xff0c;都是产品的问题&#xff0c;而你的运营手段&#xff0c;黑科技等等&#xff0c;终究只是外力罢了&#xff0c;既没办法让你赚到钱&#xff0c;也对你个…

59从零开始学Java之StringBuilder与StringBuffer

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 最近的这几篇文章&#xff0c;壹哥一直在给大家讲解字符串相关的内容。其实字符串按照可变性&#xf…

Linux内核分析与应用8-文件系统

本系列是对 陈莉君 老师 Linux 内核分析与应用[1] 的学习与记录。讲的非常之好&#xff0c;推荐观看 留此记录&#xff0c;蜻蜓点水,可作抛砖引玉 8.1 虚拟文件系统的引入 Linux文件系统中最重要的一个概念: 索引节点 Inode 文件系统是具体到分区的,所以不同分区格式化时,可以是…

Seata在Liunx环境启动配置指定JVM大小

Seata从官网下载下来默认分配的内存为2048MB,测试环境因为部署的程序比较多&#xff0c;给Seata分配2048MB内存也显得很奢侈于是在程序启动的时候配置Seata的内存 bin目录下面一个有四个脚本 在Liunx启动Seata我们需要在seata-setup.sh设置JVM seata-setup.sh设置JVM参考Liu…

DT Paint Effects工具(二)

混合笔刷 Paint Effects面板 画布菜单 笔刷和分辨率 高级笔划节点 最小-最大剪裁 笔刷类型 控制通道 笔刷轮廓 必须的物体上用 扭曲 网格设置和网格环境 刺 着色属性 照明Paint Effects 阴影 辉光

考研英语笔记:日本色情业的冰山一角

微信里很多考友说自己撑不住了&#xff0c;是的&#xff0c;这确实是考研过程中&#xff0c;最难熬的一段时光。 这就如&#xff0c;在狭窄的隧道中&#xff0c;前面只有一丝光亮。而后面&#xff0c;漆黑一片&#xff0c;早已没有了退路。 放弃是不可能了。但想拼却又觉得就那…

数据结构-时间复杂度/空间复杂度

Hello&#xff0c;好久没有更新了哦&#xff0c;已经开始学习数据结构了&#xff0c;这篇文章呢就是对刚学数据结构所接触到的时间复杂度进行一个分享哦&#xff0c;如果有错误之处&#xff0c;大家记得拍拍我哦~ 既然要讨论时间/空间复杂度&#xff0c;那我们就得知道时间/空…