Typescript泛型详解解读

泛型 : 在定义函数、接口、类的时候不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时候才能确定数据的类型

普通方法示例:

需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中

(() => {// 需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中// 定义一个函数function getArr1(value: number, count: number): number[] {// 根据数据和数量产生一个数组const arr: number[] = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr1(10.25, 3)console.log(arr1)})()

普通方法示例2:

 需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组

(() => {//需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组function getArr3(value: any, count: number): any[] {// 根据数据和数量产生一个数组const arr: any[] = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr3(100.123, 3)const arr2 = getArr3('abc', 3)console.log(arr1)console.log(arr2)// arr1中存储的是数字类型的数据// arr2中存储的是字符串类型的数据console.log(arr1[0].toFixed(2)) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)console.log(arr2[0].split('')) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)})()

泛型方法示例:

(() => {function getArr4<T>(value: T, count: number): T[] {// 根据数据和数量产生一个数组// const arr: T[] = []const arr: Array<T> = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr4<number>(200.12345, 5)const arr2 = getArr4<string>('abcdefg', 5)console.log(arr1)console.log(arr2)console.log(arr1[0].toFixed(3))  // 有智能提示的信息console.log(arr2[0].split(''))   // 有智能提示的信息})()

以上代码详细解读:

  • function getArr4<T>(value: T, count: number): T[]
    • getArr4 是函数名。
    • <T> 是类型参数,它是一个类型占位符。通过使用泛型,这个函数可以处理不同类型的数据。
    • value: T 表示函数接受一个类型为 T 的参数 value,这个参数将作为数组元素的内容。
    • count: number 表示函数还接受一个 number 类型的参数 count,用于指定生成数组的长度。
    • : T[] 是函数的返回值类型,表示函数将返回一个元素类型为 T 的数组。
  • const arr: Array<T> = []:声明了一个名为 arr 的常量,它是一个类型为 Array<T>(等同于 T[])的数组,即元素类型为 T 的数组,用于存储生成的数组元素,初始化为空数组。
  • for (let i = 0; i < count; i++) { arr.push(value); }:通过 for 循环,根据 count 的值,将 value 重复 count 次添加到 arr 数组中。
  • return arr:循环结束后,返回生成的数组 arr
  • const arr1 = getArr4<number>(200.12345, 5):调用 getArr4 函数,明确指定类型参数 T 为 number。传入数值 200.12345 作为 value 参数,5 作为 count 参数。函数执行后会返回一个包含 5 个 200.12345 的数组,并将其赋值给 arr1
  • const arr2 = getArr4<string>('abcdefg', 5):调用 getArr4 函数,指定类型参数 T 为 string。传入字符串 'abcdefg' 作为 value 参数,5 作为 count 参数。函数执行后会返回一个包含 5 个 'abcdefg' 的数组,并将其赋值给 arr2
  • onsole.log(arr1[0].toFixed(3)):访问 arr1 数组的第一个元素(类型为 number),调用 toFixed(3) 方法将该数字四舍五入保留三位小数,并将结果打印到控制台。由于 arr1 的类型被明确为 number[],所以在访问 arr1[0] 时会有智能提示,编辑器能识别出 toFixed 方法是 number 类型的可用方法。
  • console.log(arr2[0].split('')):访问 arr2 数组的第一个元素(类型为 string),调用 split('') 方法将该字符串拆分成字符数组,并将结果打印到控制台。同样,因为 arr2 的类型被明确为 string[],在访问 arr2[0] 时会有智能提示,编辑器能识别出 split 方法是 string 类型的可用方法。

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

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

相关文章

解决npm install安装出现packages are looking for funding run `npm fund` for details问题

当我们运行npm install时&#xff0c;可能会收到类似以下的提示信息&#xff1a;“x packages are looking for funding.” 这并不是错误提示&#xff0c;也不会影响项目的正常运行。其实实在提醒有一些软件包正在寻求资金支持。 根据提示输入npm fund可以查看详细的信息&#…

小米Vela操作系统开源:AIoT时代的全新引擎

小米近日正式开源了其物联网嵌入式软件平台——Vela操作系统&#xff0c;并将其命名为OpenVela。这一举动在AIoT&#xff08;人工智能物联网&#xff09;领域掀起了不小的波澜&#xff0c;也为开发者们提供了一个强大的AI代码生成器和开发平台。OpenVela项目源代码已托管至GitH…

2025_1_22打卡

402. 移掉 K 位数字 - 力扣&#xff08;LeetCode&#xff09; 279. 完全平方数 - 力扣&#xff08;LeetCode&#xff09;

【搞机】GMK-G3因特尔n100处理器核显直通win10虚拟机

环境 系统&#xff1a;Proxmox Virtual Environment 8.1.3 Linux内核&#xff1a;Linux version 6.5.13-6-pve (buildproxmox) (gcc (Debian 12.2.0-14) 12.2.0, GNU ld (GNU Binutils for Debian) 2.40) #1 SMP PREEMPT_DYNAMIC PMX 6.5.13-6 (2024-07-26T12:34Z) CPU&#x…

MECD+: 视频推理中事件级因果图推理--VLM长视频因果推理

论文链接&#xff1a;https://arxiv.org/pdf/2501.07227v1 1. 摘要及主要贡献点 摘要&#xff1a; 视频因果推理旨在从因果角度对视频内容进行高层次的理解。然而&#xff0c;目前的研究存在局限性&#xff0c;主要表现为以问答范式执行&#xff0c;关注包含孤立事件和基本因…

2024“博客之星”——我的博客成长与技术洞察

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 目录 一、引言二、个人成长与突破盘点&#xff08;一&#xff09;技能提升与知识拓展&#xff08;二&#xff09;创作风格与影响力提升&#xf…

KOC营销2.0:出海品牌在2025年春节的创新故事讲述

在全球化日益加深的今天&#xff0c;春节已不再是中国独有的节日符号&#xff0c;它逐渐成为了世界各地文化交融的一部分。对于出海品牌而言&#xff0c;春节不仅是连接中国消费者与海外市场的桥梁&#xff0c;更是展示品牌文化深度与创意的重要契机。KOC营销作为新时代的传播策…

最新-CentOS 7安装1 Panel Linux 服务器运维管理面板

CentOS 7安装1 Panel Linux 服务器运维管理面板 一、前言二、环境要求三、在线安装四、离线安装1.点击下面1 Panel官网链接访问下载&#xff0c;如未登录或注册&#xff0c;请登录/注册后下载2.使用将离线安装包上传至目标终端/tem目录下3.进入到/tem目录下解压离线安装包4.执行…

基于springboot+vue的高校社团管理系统的设计与实现

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

vim在末行模式下的删除功能

删除:d :1d #删除第1行 :1,5d #删除第一行至第五行 :g/^\s*$/d #删除文件中的空白行 ——g所有 ——^表示行首 ——$表示行尾 ——\s 空白符 ——* 0至多个 示例&#xff1a;

DRG_DIP 2.0时代医院程序结构转型与数据结构优化研究

一、引言 1.1 DRG_DIP 2.0 改革背景与意义 医保支付方式改革在医疗保障制度改革中占据着极为关键的地位&#xff0c;是推动医疗领域变革的核心力量。它犹如一把精准的手术刀&#xff0c;对医疗资源的合理分配、医疗服务质量的稳步提升以及医疗费用的有效控制起着决定性作用。…

基于springboot体育运动会比赛系统

基于Spring Boot的体育运动会比赛系统是一个专为体育运动会组织和管理设计的现代化解决方案。 一、系统背景与目的 随着人们对健康生活的追求和对体育运动的热爱&#xff0c;体育运动会在各个层面得到了广泛的开展。然而&#xff0c;传统的体育运动会组织和管理方式存在着效率…

nginx 配置防爬虫

今天早上查看服务器&#xff0c;发现昨天发布的一个在线解析充电桩协议的网页工具有大量的访问记录&#xff0c;应该是爬虫在爬api接口数据。该工具api接口后台用的是python写的&#xff0c;和大多数项目一样也采用nginx反向代理&#xff0c;由于采用nginx&#xff0c;可以利用…

到华为考场考HCIE的注意事项和考试流程

大家好&#xff0c;我是张同学&#xff0c;来自成都职业技术学院2021级计算机网络专业。最近成功通过了 Datacom HCIE 考试&#xff0c;在这里和大家分享一下我的经验。 考证契机 在母校的培养下&#xff0c;我接触到ICT这个行业&#xff0c;打好了基础&#xff0c;开始了成…

HarmonyOS快速入门

HarmonyOS快速入门 1、基本概念 UI框架&#xff1a; HarmonyOS提供了一套UI开发框架&#xff0c;即方舟开发框架&#xff08;ArkUI框架&#xff09;。方舟开发框架可为开发者提供应用UI开发所必需的能力&#xff0c;比如多种组件、布局计算、动画能力、UI交互、绘制等。 方…

Ext2 文件系统:数字世界的基石,深度解码超时空存储魔法

本篇博主将带大家深入底层探秘系统是如何与磁盘进行相互交流的&#xff0c;配合精美配图&#xff0c;细节讲解来带大家深入探究&#xff08;注&#xff1a;本篇文章建议了解磁盘内部物理结果组成及设计再进行阅读&#xff09;。 羑悻的小杀马特.-CSDN博客羑悻的小杀马特.擅长C…

在centos上编译安装opensips【初级-默认安装】

环境&#xff1a;centos9 last opensips3.2 dnf update -y dnf install -y gcc make git automake libtool pcre-devel libxml2-devel \libcurl-devel postgresql-devel \bzip2-devel zlib-devel ncurses-devel libuuid-devel \libpcap-devel # 有报错的直接删除cd /usr/lo…

从零到上线:Node.js 项目的完整部署流程(包含 Docker 和 CICD)

从零到上线&#xff1a;Node.js 项目的完整部署流程&#xff08;包含 Docker 和 CI/CD&#xff09; 目录 项目初始化&#xff1a;构建一个简单的 Node.js 应用设置 Docker 环境&#xff1a;容器化你的应用配置 CI/CD&#xff1a;自动化构建与部署上线前的最后检查&#xff1a;…

类和对象——类的对象占用内存的大小计算

类的对象大小的计算 类的对象大小的计算1 案例分析2 如何计算类对象的大小案例分析中的猜测结构体内存对齐规则 类的对象大小的计算 1 案例分析 #include<iostream>class Date { public:void Init(int year, int mouth, int day) {year year;_mouth mouth;day_ day;…

nuxt3项目打包部署到服务器后配置端口号和开启https

nuxt3打包后的项目部署相对于一般vite打包的静态文件部署要稍微麻烦一些&#xff0c;还有一个主要的问题是开发环境配置的.env环境变量在打包后部署时获取不到&#xff0c;具体的解决方案可以参考我之前文章 nuxt3项目打包后获取.env设置的环境变量无效的解决办法。 这里使用的…