TypeScript 泛型的概念和基本使用

什么是TypeScript 泛型?

  • 在定义函数,接口,类的时候不能预先确定使用的数据类型,而是在调用使用这些函数,接口,类的时候才能确定的数据类型;

1,单个泛型的参数

例如通过使用any这种方式,value1的类型随着传入的类型数据而变化:

function myfunction01(value1: any, value2: number): any[]{let arr: any[] = [value1, value2]return arr
}
myfunction01('123456', 111);
myfunction01(123456, 111);

改为泛型之后:

function myfunction01<T>(value1: T, value2: T): T[]{// let arr: T[] = [value1, value2]let arr: Array<T> = [value1, value2]return arr
}
myfunction01<string>('123456', '1111');
myfunction01<number>(123456, 111);

2,多个泛型的参数

function myfunction01<T, X>(value1: T, value2: X): [T, X]{return [value1, value2]
}
myfunction01<string, number>('123456', 1111);

3,泛型接口

泛型接口:接口也可以配合泛型来使用,以增加其灵活性,增强其复用性

interface 接口名<类型变量1,类型变量2> {变量:类型变量1,变量:类型变量2
}

使用:

interface MyArray<T> {length: T,data:string[]push(n: T): T,pop(): void,reverse(): T[]
}
const obj: MyArray<number> = {length: 11,push (o){ return o },pop: function () {},reverse: () => [1, 2],data: ['1', '1']
}
  1. 在接口名称的后面添加 <类型变量>,那么,这个接口就变成了泛型接口。
  2. 接口的类型变量,对接口中所有其他成员可见,也就是接口中所有成员都可以使用类型变量。
  3. 使用泛型接口时,需要显式指定具体的类型。

4,泛型工具类型

泛型工具类型:TS 内置了一些常用的工具类型,来简化 TS 中的一些常见操作

说明:它们都是基于泛型实现的(泛型适用于多种类型,更加通用),并且是内置的,可以直接在代码中使用。 这些工具类型有很多,先来学习以下3个:

① Partial

将一个对象类型中的所有属性变为可选属性;

type User = {id: number;name: string;age: number;
}
type UpdatedPerson = Partial<User>;

得到的 UpdatedPerson 类型与下面的类型定义是相同的:

type UpdatedPerson = {id?: number;name?: string;age?: number;
}

② Readonly

将Type 所有属性都设置为 readonly(只读)。

type Props =  {id: stringchildren: number[]
}
type ReadonlyProps = Readonly<Props>

构造出来的新类型 ReadonlyProps 结构和 Props 相同,但所有属性都变为只读的。不可修改

③ Pick

Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。

type Props = {id: stringtitle: stringchildren: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>
  1. Pick 工具类型有两个类型参数:1 表示选择谁的属性 2 表示选择哪几个属性。 2. 其中第二个类型变量,如果只选择一个则只传入该属性名即可。
  2. 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
  3. 构造出来的新类型 PickProps,只有 id 和 title 两个属性类型。

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

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

相关文章

自动化干货!一文搞懂Salesforce Flow/流中的Pause元素

通过自动化&#xff0c;帮助团队提升效率&#xff0c;将员工从那些重复、枯燥、耗时的工作中解放出来&#xff0c;转而从事更具创造性、更有价值的工作&#xff0c;是很多企业数字化转型朴素而又迫切的需求&#xff0c;也是世界No.1 CRM——Salesforce的一大领先优势。 Flow B…

【element-ui】 el-table 表格动态合并相同数据单元格最全教程,可指定列+自定义合并条件,附完整代码

el-table合并单元格 1.固定合并 官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。 该函数可以返回一个包含…

Docker实战-如何去访问Docker仓库?

导语   仓库在之前的分享中我们介绍过,它主要的作用就是用来存放镜像文件,又可以分为是公共的仓库和私有仓库。有点类似于Maven的中央仓库和公司内部私服。 下面我们就来介绍一下在Docker中如何去访问各种仓库。 Docker Hub 公共镜像仓库 Docker Hub 是Docker官方提供的最…

【Qt高级】QThread与QTimer组合使用引出的信号槽执行在哪个线程的思考【2023.08.06】

源码见 testQThread_QTimer… Qt 版本5.6.3 视频讲解&#xff1a;https://www.bilibili.com/video/BV15P411C79i/ 链接: 视频讲解 简介 想法很单纯&#xff0c;就是主线程启动一个子线程&#xff0c;子线程里启动一个定时器&#xff0c;定时执行一些任务&#xff0c;然鹅实际开…

Yolov5缺陷检测/目标检测 Jetson nx部署Triton server

使用AI目标检测进行缺陷检测时&#xff0c;部署到Jetson上即小巧算力还高&#xff0c;将训练好的模型转为tensorRT再部署到Jetson 上供http或GRPC调用。1 Jetson nx 刷机 找个ubuntu 系统NVIDIA官网下载安装Jetson 的sdkmanager一步步刷机即可。 本文刷的是JetPack 5.1, 其中包…

Oracle日志相关操作

1.归档日志设置 # 切换账号 $ su - oracle# 登录oracle的sys账户 $ sqlplus / as sysdbasql> archive log list; #查看是不是归档方式 SQL> archive log list; Database log mode Archive Mode Automatic archival Enabled Archive destin…

【Windows】Windows开机密码重置

文章目录 前言一、问题描述二、操作步骤2.1 安装DaBaiCai_d14_v6.0_2207_Online.exe2.2 插入U盘2.3 打开大白菜&#xff0c;点击“一键制作USB启动盘”2.4 等待进度条走完2.5 重启电脑&#xff0c;开机按“F12”或者“F8”&#xff08;具体百度一下&#xff0c;对应品牌电脑开机…

笔试数据结构选填题

目录 卡特兰数Catalan&#xff1a;出栈序列/二叉树数 树 二叉树 N01N2 哈夫曼树&#xff08;最优二叉树&#xff09;Huffman 度m的哈夫曼树只有度为0和m的结点&#xff1a;Nm(n-1)/(m-1) 平衡二叉树AVL Nh表示深度为h最少结点数&#xff0c;则N00&#xff0c;N11&#…

网络防御(7)

课堂实验 R1 [Huawei] int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 100.1.12.2 24 protocolAug 1 2023 10:24:09-08:00 Huawei gOlIFNET/4/LINK STATE(1)[4]:The1ineIp on the interface GigabitEthernet0/0/0 has entered the Up state. [Huawei-GigabitEthernet0/0/…

SpringBoot 底层机制分析【Tomcat 启动+Spring 容器初始化+Tomcat 如何关联Spring 容器】【下】

&#x1f600;前言 本篇博文是关于SpringBoot 底层机制分析实现&#xff0c;希望能够帮助你更好的了解SpringBoot &#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大…

Linux 查找某个目录下所有文件中是否含有某些字符串

使用如下命令进行查找&#xff1a; find . -name "*" | xargs grep -n --color "hello"查找当前目录下所有文件&#xff0c;找出含有字符串 “hello” 的文件并显示行号。 在~/.bashrc 中添加如下函数&#xff1a; function finds(){if [ -z $1 ];thene…

Leetcode.1559 二维网格图中探测环

题目链接 Leetcode.1559 二维网格图中探测环 rating : 1838 题目描述 给你一个二维字符网格数组 g r i d grid grid &#xff0c;大小为 m x n &#xff0c;你需要检查 g r i d grid grid 中是否存在 相同值 形成的环。 一个环是一条开始和结束于同一个格子的长度 大于等于…

lc137. 只出现一次的数字 II

数组排序&#xff0c;既和前不一样又和后不一样的就是唯一的一个 public static int numberOnce(int[] nums) {Arrays.sort(nums);if (nums.length > 2 && nums[0] ! nums[1]) {//避免只有一个元素的数组return nums[0];}if (nums.length > 2 && nums[nu…

PPTP应用案例:让你的网络不再受限

嗨&#xff0c;小伙伴们&#xff0c;作为一家专业的PPTP代理供应商&#xff0c;我们深知网络安全对于每个人的重要性。今天&#xff0c;我将与大家分享一些关于PPTP的应用案例&#xff0c;借此帮助大家更好地了解PPTP的实际应用和专业性。无论你是在公共Wi-Fi上冲浪&#xff0c…

使用MyBatis操作数据库

hi,大家好,今天为大家带来MyBatis操作数据库的知识 文章目录 &#x1f437;1.根据MyBatis操作数据库&#x1f9ca;1.1查询操作&#x1f347;1.1.1无参查询&#x1f347;1.1.2有参查询 &#x1f9ca;1.2删除操作&#x1f9ca;1.3修改操作&#x1f9ca;1.4增加操作&#x1f9ca;…

Windows 安装 pandoc 将 jupyter 导出 pdf 文件

Windows 安装 pandoc 将 jupyter 导出 pdf 文件 1. 下载 pandoc 安装文件2. 安装 pandoc3. 安装 nbconvert4. 使用 pandoc 1. 下载 pandoc 安装文件 访问 https://github.com/jgm/pandoc/releases&#xff0c;下载最新版安装文件&#xff0c;例如&#xff0c;3.1.6.1 版&#…

【Redis面试题整理一】

一、Redis定义 Redis 是一种基于内存的数据库&#xff0c;对数据的读写操作都是在内存中完成&#xff0c;读写速度非常快&#xff0c;被广泛应用于缓存方向。并且&#xff0c;Redis 存储的是 KV 键值对数据。 二、Redis为什么不存在并发竞争 对数据类型的操作都是原子性的&a…

spring-boot webservice的例子

webservice发布服务 源码下载地址 spring-boot-webservice例子资源-CSDN文库 webservice cilent调用 源码下载地址 spring-boot-clintwebservice调用服务的例子资源-CSDN文库

jackson自定义序列化反序列化

jackson自定义序列化和反序列化 自定义序列化 序列化主要作用在返回数据的时候以BigDecimal统一返回3位小数为例自定义序列化处理类继承jackson的JsonSerializer类&#xff0c;重写serialize方法 /*** author liouwb*/ public class BigDecimalSerializer extends JsonSeria…

Web安全——Burp Suite基础上

Burp Suite基础 一、Burp Suite安装和环境配置如何命令行启动Burp Suite 二、Burp Suite代理和浏览器设置FireFox设置 三、如何使用Burp Suite代理1、Burp Proxy基本使用2、数据拦截与控制3、可选项配置Options客户端请求消息拦截服务器端返回消息拦截服务器返回消息修改正则表…