《六》TypeScript 中的泛型

news2024/10/5 18:29:13

泛型:宽泛的类型,其实就是类型的参数化,让类型像参数一样,不预先指定,而是在使用的时候再让别人传入进来。

在定义函数、类或者接口时,如果遇到类型不明确的时候,就可以使用泛型。

平常开发中可能会用到一些名称的缩写:

  1. T:Type 的缩写,类型。
  2. K、V:key 和 value 的缩写,键值对。
  3. E:Element 的缩写,元素。
  4. O:Object 的缩写,对象。

泛型函数:

定义函数时,在函数名的后面加上 <通用的任意命名的类型名称>,然后再将类型定义为参数的类型;调用函数时,在函数名的后面加上 <具体的实际的类型名称>

例如:定义一个函数,参数接收什么,返回值就返回什么。

// 1. 没有给参数 args 定义类型,默认是 any
function fn (args) {
  return args
}

// 2. 返回值的类型就也是 any。但这样其实就是没有做类型检测
const res1 = fn('Lee')
const res2 = fn(18)

请添加图片描述

// 3. 给参数 args 定义联合类型
function fn2 (args: string | number) {
  return args
}

// 4. 返回值的类型就也是联合类型。但实际想要的结果是传入什么类型的参数,就返回什么类型的返回值
const res3 = fn2('Lee')
const res4 = fn2(18)

请添加图片描述

// 使用泛型来实现:
// 2. 接收类型
// 3. 将其定义为参数的类型
function fn3<argsType> (args: argsType) {
  return args
}

// 1. 将类型传入
const res5 = fn3<string>('Lee')
const res6 = fn3<number>(18)

请添加图片描述

大部分情况,调用函数时,可以省略不传递类型,因为 TypeScript 会根据传递的参数进行类型推断。但是也有可能会推断错误,此时就需要手动传递类型了。

function fn<argsType> (args: argsType) {
  return args
}

// 可以省略不传递类型,TypeScript 会根据传递的参数进行类型推断
let res1 = fn('Lee') // 使用 let 会推断出 string 类型
const res2 = fn(18) // 使用 cont 会直接推断成更加具体的字面量类型

泛型函数支持给类型指定默认值。

function fn<argsType = string> (args: argsType ) {
  return args
}

let res = fn('Lee')

泛型函数支持传入多个泛型。

function fn<args1Type, args2Type> (args1: args1Type, args2: args2Type ) {
  return {args1, args2}
}

const res = fn<string, number>('Lee', 18)

泛型类:

在定义类的时候也可以使用泛型。

定义类时,在类名的后面加上 <通用的任意命名的类型名称>,然后再将类型定义为属性的类型;调用类时,在类名的后面加上 <具体的实际的类型名称>

class Point<Type> {
  constructor(public x: Type, public y: Type) {}
}

const p1 = new Point<number>(10, 20)
const p2 = new Point<string>('10', '20')

大部分情况,调用类时,可以省略不传递类型,因为 TypeScript 会根据传递的参数进行类型推断。但是也有可能会推断错误,此时就需要手动传递类型了。

泛型类支持给类型指定默认值。

泛型类也支持传入多个泛型。

泛型接口:

在定义接口的时候也可以使用泛型。

定义接口时,在接口名的后面加上 <通用的任意命名的类型名称>,然后再将类型定义为属性的类型;调用接口时,在接口名的后面加上 <具体的实际的类型名称>

interface PersonInterface<Type> {
  name: Type,
  age: number,
  hobby: Type,
}

const p1: PersonInterface<string> = {
  name: 'Lee',
  age: 18,
  hobby: '吃',
}

const p2: PersonInterface<boolean> = {
  name: true,
  age: 18,
  hobby: false,
}

泛型接口中,TypeScript 无法进行类型推断,必须明确传递类型。除非指定默认值的话,就可以不明确传递类型了。

请添加图片描述

// 指定类型的默认值
interface PersonInterface<Type = string> {
  name: Type,
  age: number,
  hobby: Type,
}

const p: PersonInterface = {
  name: 'Lee',
  age: 18,
  hobby: '吃',
}

泛型接口也支持传入多个泛型。

泛型约束:

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

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

相关文章

Qt5.15.10+msvc2019_x86+qwebengine(含mp4)源码编译

系统要求: win10 64bit 英文版(或者把“区域”->“管理”->“非Unicode程序中所使用的当前语言”->改为"英语(美国)") 内存16g够用,cpu性能越高越好,硬盘在安装环境、下载源码后,至少还有100g可用空间 下载源码: https://download.qt.io/archiv…

Hive SQL:DDL建库 建表

Hive SQL:DDL建库 / 建表 &#x1f418;Hive SQL数据库 建库 数据库 在Hive中&#xff0c;默认的数据库叫做default&#xff0c;存储数据位置位于HDFS&#xff1a;/user/hive/warehouse 用户自己创建的数据库存储位 &#xff1a;/user/hive/warehouse/database_name.db 创…

linux文件的增量备份 Shell命令脚本

简单的增量备份脚本&#xff0c;自己用到了之后把部分择出来记录一下&#xff0c;方便日后查阅 # 昨天对应的月份 n_mon$(date -d -1day %Y%m) # 组合文件夹路径 path/home/admin/"$n_mon" # 昨天的0点作为增量备份起始时间&#xff0c;今日0点作为截止时间 s_date$…

web3带大家简单建立区块链概念

上文 Web3.0概念我们简单说了说 web3的概念 可能很多人还是会感觉 太概念了 然后 这一篇 我们再了解一下区块链 因为 web3.0的一个构建基础 就是 区块链 有了区块链 才衍生出了后面的很多东西 去中心化的身份 去中心化的应用 dapp 其实最终的目的 也是带着大家去构建起自己的 …

RK3588 MPP解码句柄泄露问题记录

1. 问题背景 最近在用瑞芯微3588开发板做一个视频处理的项目&#xff0c;前两天拷机发生了闪退&#xff0c;弹出的问题是“打开文件过多”&#xff0c;经过初步排查定位到是MPP硬解码部分出的问题。 我的MPP解码部分主要用来读取网络相机rtsp流&#xff0c;主要参考了一个git…

智能应急照明及疏散指示系统在实际项目中的应用和其实际意义 安科瑞 许敏

摘要&#xff1a;近年来&#xff0c;随着照明技术的迅速发展&#xff0c;高大而复杂的智能建筑日益增多&#xff0c;消防应急照明法规和标准不断健全和完善&#xff0c;消防应急灯具产品品种不断增多&#xff0c;性能不断改进&#xff0c;技术水平有很大提高&#xff0c;得到了…

这就是艺术,优雅的二维码生成器「GitHub 热点速览」

作者&#xff1a;HelloGitHub-小鱼干 平时如果没有需要一般那团黑乎乎的二维码&#xff0c;估计路过的人看见第一眼就不会再看第二眼。但是假若&#xff0c;它是个帅哥靓妹&#xff0c;估计就不同了&#xff0c;更别提像是艺术画一样&#xff0c;将编码图案融入到画里的二维码生…

CEETRON如何赋能航空航天领域打造WEB CAE后处理系统?

CAE&#xff08;计算机辅助工程&#xff09;在航空航天领域具有广泛的应用&#xff0c;它在航空航天器的设计、性能评估和安全分析等方面开发坚持重要的作用。 本文主要探讨Ceetron集合CAE在航空航天领域中的应用价值&#xff0c;以及对CAE在航空航天领域应用的更详细描述&…

【粉笔刷题】第二回

在JavaScript中下面选项&#xff0c;关于this描述正确的是&#xff08;&#xff09; A在使用new实例化对象时, this指向这个实例对象 B当对象调用函数或者方法时,this指向这个对象。 C在函数定义时,this指向全局变量 D在浏览器下的全局范围内&#xff0c;this指向全局对象this表…

Django高级扩展之中间件

中间件是Django请求&#xff0f;响应处理的钩子框架。它是一个轻量级的、低级的“插件”系统&#xff0c;用于全局改变Django的输入或输出。每个中间件组件负责实现一些特定的功能。例如&#xff0c;Django包含一个中间件组件AuthenticationMiddleware&#xff0c;它使用会话将…

光伏电池局部遮阴下三种不同的工况对比MATLAB仿真模型

光伏电池局部遮阴下三种不同的工况对比MATLAB仿真模型及程序资源-CSDN文库https://download.csdn.net/download/weixin_56691527/87910311 模型简介&#xff1a; 建议使用MATLAB21b及以上版本打开&#xff01; 光伏阵列表面被局部遮挡时会产生热斑效应。为了防止太阳电池因热…

如何在Microsoft Excel中使用TRUNC函数

Excel 中有多种删除小数点和缩短数值的方法。在本文中,我们将解释如何使用 TRUNC 函数,以及它与其他技术的不同之处。 TRUNC函数 什么是 TRUNC 功能如何使用 TRUNC 函数从日期时间戳中删除时间什么是 TRUNC 功能 TRUNC 函数将数字截断为指定的小数位数。使 TRUNC 不同于其他…

windows编译ffmpeg,并开启png的编解码器

废话不多说了&#xff0c;先上下载链接 ffmpeg官方网站&#xff1a;http://ffmpeg.org/download.html ffmpeg源码下载链接:https://ffmpeg.org/releases/ffmpeg-3.4.13.tar.gz 如果需要其他版本&#xff0c;修改版本号即可&#xff0c;适用于3.4全系列&#xff0c;如https:/…

Vue中如何进行网页截图与截屏?

Vue中如何进行网页截图与截屏&#xff1f; 在Web开发中&#xff0c;有时候需要对网页进行截图或截屏。Vue作为一个流行的JavaScript框架&#xff0c;提供了一些工具和库&#xff0c;可以方便地实现网页截图和截屏功能。本文将介绍如何在Vue中进行网页截图和截屏。 网页截图 网…

2023年CPSM-3中级项目管理专业人员认证有啥用?

CPSM-3中级项目管理专业人员认证&#xff0c;是中国标准化协会&#xff08;全国项目管理标准化技术委员会秘书处&#xff09;联合中国国际人才交流基金会&#xff0c;面向社会开展项目管理专业人员能力的等级证书。旨在构建多层次从业人员培养培训体系&#xff0c;建立健全人才…

Linux操作系统学习——启动

概要 Linux操作系统内核是服务端学习的根基&#xff0c;也是提高编程能力、源码阅读能力和进阶知识学习能力的重要部分&#xff0c;本文开始将记录Linux操作系统中的各个部分源码学习历程。 1. 理解代码的组织结构 以Linux源码举例&#xff0c;首先你得知道操作系统分为哪几个部…

电脑怎么录屏?推荐2款录制电脑屏幕的软件!

案例&#xff1a;我经常需要把电脑上的内容分享给别人&#xff0c;一般通过手机拍摄的方式。这就导致视频十分模糊&#xff0c;给人的观感不太好&#xff0c;有没有什么方法可以实现在电脑上直接录屏&#xff1f; 【我想录制我的电脑屏幕上的内容分享给别人&#xff0c;但是我…

常用JVM命令

top 展示 进程运行的完整命令行的话可以用 top -c &#xff0c;当命令行较长无法分辨是哪个程序&#xff0c;可使用键盘右键将窗口不断滑动至右侧查看。 uptime jps 查看当前正在运行的java进程 执行结果&#xff1a; pid 运行文件 [roottest1 ~]# jps 24001 rs-medical-rp…

第六期:链表回文旋转的秘密

文章目录 1. 反转链表2. 回文链表代码1. 反转链表2. 回文链表 PS&#xff1a;每道题解题方法不唯一&#xff0c;欢迎讨论&#xff01;每道题后都有解析帮助你分析做题&#xff0c;答案在最下面&#xff0c;关注博主每天持续更新。 1. 反转链表 题目描述&#xff1a; 给你单链表…

九、会话控制——cookie、session、token

文章目录 前言一、cookie1.1 cookie 是什么1.2 cookie 的特点1.3 cookie 的运行流程1.4 express 框架中设置cookie1.5 express 框架中删除cookie1.6 express 框架中获取cookie 二、session2.1 session 是什么2.2 session 的作用2.3 session 的运行流程2.4 session 和 cookie 的…