typescript泛型的基本使用

文章目录

  • 泛型规范
  • 一、泛型的作用
  • 二、any 和 泛型 的区别
    • 1: any类型
    • 2: 泛型
    • 3: 总结
  • 三、泛型的简单使用
    • 1.返回任何类型的泛型函数
    • 2.代码示例
    • 3.返回指定类型的泛型函数
  • 四、泛型接口
    • (1)错误代码示范
    • (2)报错说明
    • (3)正确代码示范


泛型规范

命名:泛型命名建议遵循大驼峰即可。如Person PersonList…


一、泛型的作用

在TypeScript中,泛型(Generics)是一种创建可重用组件的工具,这些组件可以在多种类型上工作,而不仅仅是单一类型。泛型提供了一种方式,使得组件可以适应任何数据类型,如类型(types)、接口(interfaces)、函数类型等。

(1)类型保护:泛型可以帮助我们在编译时检查类型,确保我们的函数或类在处理各种类型的数据时,能够正确地使用这些数据。
(2)代码复用:通过使用泛型,我们可以创建可重用的组件。例如,我们可以创建一个可以接受任何类型的数组的函数,而不是为每种可能的数组类型创建一个单独的函数。
(3)抽象类型:泛型允许我们编写更抽象、更通用的代码。例如,我们可以编写一个处理“可比较”对象的函数,而不是为每种可能的比较操作(如数字比较、字符串比较等)编写单独的函数。

二、any 和 泛型 的区别

function getAge<T>(arg: T, str: T): T{console.log('res', str);return arg
}
console.log(getAge('111','1')); //都是string类型
console.log(getAge(122,1)); // 都是number类型
console.log(getAge(true, false)); // 都是boolean类型

如上述代码,你可能会疑惑,使用泛型定义数据类型后,为什么任意类型都可以执行。any和泛型都是TypeScript中处理类型的方式,但它们的用途和行为是不同的。

1: any类型

any是TypeScript的一种类型,可以让我们更像使用JavaScript那样编写代码。当你不确定一个变量会是什么类型的时候,你可以使用any类型。这意味着你可以给any类型的变量赋任何类型的值,也可以调用任何方法,TypeScript编译器都不会进行类型检查。但是,这样做会失去类型检查的所有优点。

2: 泛型

泛型是TypeScript提供的一种工具,用于创建可重用的组件,这些组件可以适用于多种类型,而不是单一的类型。泛型允许你创建这样的函数、类和接口,这些函数、类和接口可以适用于多种类型,而不仅仅是一种类型。使用泛型,你可以保留类型信息(即,类型之间的关系),这样在编译时期和运行时期都可以得到类型的保障。

3: 总结

总的来说,any类型提供了最大的灵活性,但是也放弃了类型检查的所有优点。而泛型提供了一种灵活的方式来处理多种类型,同时还保留了类型检查的优点。

三、泛型的简单使用

1.返回任何类型的泛型函数

function getId<T>(id: T): T {// ...
}

在这个例子中,T 是一个类型变量——一种特殊的变量,用于表示类型而非值。这个函数允许我们传入任何类型的 arg,并返回与之相同类型的值。这样,我们就可以用同一个函数处理不同类型的数据,而不需要为每种数据类型编写单独的函数。 和any的区别在于,如果你传入的说number类型,返回为string类型就会报错。

2.代码示例

和any类型一样,参数可以为任意属性,但和any不同的是,当那指定了某种类型,你就不能返回与之不相同类型的数据类型了。简单概括:泛型保证函数内类型复用,且保证类型安全

function getAge<T>(arg: T, str: T): T{console.log('res', str);return arg
}
console.log(getAge('111','1')); //都是string类型
console.log(getAge(122,1)); // 都是number类型
console.log(getAge(true, false)); // 都是boolean类型
// 指定boolean类型,参数为boolean类型
// 报错 Argument of type 'boolean' is not assignable to parameter of type 'string'
// 翻译错误:类型为“boolean”的参数不可分配给类型为“string”的参数
// console.log(getAge<string>(true, false));  // 指定strign类型,参数为boolean类型,所以报错了
console.log(getAge<boolean>(true, false));

3.返回指定类型的泛型函数

getAge<boolean>(true, false)

其实就是在调用函数的时候,将函数的泛型设置为指定数据类型即可。它可以很好的创建可重用并可以接受任何类型的函数。

四、泛型接口

(1)错误代码示范

interface Person{name: string,age: number,sex: string
}function getUser<Person>():Person{return {name: '',age: 18,sex: ''}
}
getUser();

(2)报错说明

Type ‘{ name: string; age: number; sex: string; }’ is not assignable to type ‘Person’.
‘Person’ could be instantiated with an arbitrary type which could be unrelated to ‘{ name: string; age: number; sex: string; }’.Vetur(232

翻译:类型“{name:string;age:number;sex:string;}”不可分配给类型“Person”。
“Person”可以用任意类型实例化,该类型可能与“{name:string;age:number;sex:string;}”无关。

说明:在 TypeScript 中,当你在函数声明中使用泛型(如 )时,你实际上是在声明一个新的泛型类型,而不是使用已经存在的 Person 接口。这就是为什么你的代码会报错的原因。人话:getId< Person > 传入的Person 本身就可以用任意类型传入,你传入Person有点多余。

(3)正确代码示范

其实就是把getId< Person > 旁边的< Person >删除就可以了。

interface Person{name: string,age: number,sex: string
}function getUser():Person{return {name: '',age: 18,sex: ''}
}
getUser();

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

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

相关文章

无脑018——win11部署whisper,语音转文字

1.conda创建环境 conda create -n whisper python3.9 conda activate whisper安装pytorch pip install torch1.8.1cu101 torchvision0.9.1cu101 torchaudio0.8.1 -f https://download.pytorch.org/whl/torch_stable.html安装whisper pip install -U openai-whisper2.准备模型…

【论文阅读】CAN网络中基于时序信道的隐蔽认证算法

文章目录 摘要一、引言和动机A 相关工作 二、背景及实验设置A 以前工作中的时钟偏差和局限性B.最坏到达时间C.安装组件 三、优化流量分配A.问题陈述B.优化帧调度 四、协议和结果A.主协议B.对手模型C. 优化流量和单一发送者的结果D.多发送方情况和噪声信道 摘要 以前的研究工作…

Linux下为可执行文件添加图标

Ubuntu 18.04上使用Qt5.14.2创建一个简单的Qt Widgets项目test&#xff0c;添加2个Push Button按钮&#xff0c;点击分别获取github和csdn地址&#xff0c;在mainwindow.cpp中添加的代码如下: #include "mainwindow.h" #include "ui_mainwindow.h" #inclu…

基于Spring,SpringMVC,MyBatis的校园二手交易网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring,SpringMVC,MyBatis的校园二…

vue项目中实现doc/excel/pdf/txt/图片等文件的预览

vue项目中实现doc/excel/pdf/txt/图片等文件的预览 word预览 1. 使用vue-office-docx&#xff08;只支持docx文件预览&#xff0c;不支持doc文件&#xff09; 支持文档网络地址&#xff08;https://***.docx&#xff09;。 文件上传时预览&#xff0c;此时可以获取文件的Arra…

从零开发短视频电商 在AWS上用SageMaker部署开源模型并用Java SDK调用

文章目录 1.创建AWS账户2.登录AWS3.创建域4.部署模型方式一 使用JumpStart可视化界面部署内置的模型方式二 采用python脚本部署私有模型5.调用模型AWS Java SDK调用Http调用6.监控7.自动扩缩容1.创建AWS账户 需要准备好邮箱一个,支持visa功能的信用卡一个。然后到aws上自己去…

电梯安全远程监控系统解决方案

一、方案背景 随着万丈高楼的平地起&#xff0c;电梯也成为了我们出入高层建筑最常用的工具之一。面对电梯数量的不断增加&#xff0c;电梯安全事故也是相继频发&#xff0c;因此关于电梯的安全运行就越来越受到社会各界的关注。电梯的使用在给人们出入高层建筑带来便利的同时&…

CSS新手入门笔记整理:CSS文本样式

首行缩进&#xff1a;text-in-dent 语法 text-in-dent&#xff1a;像素值; 中文段落首行一般需要缩进两个字的空间。想要实现这个效果&#xff0c;那么textindent值应该是font-size值的2倍。 水平对齐&#xff1a;text-align 语法 text-align&#xff1a;取值; 属性值 说…

分布式ID生成框架Leaf升级踩坑

背景&#xff1a; 在项目中需要一个统一的拿单号等唯一ID的服务&#xff0c;就想起了之前用到的leaf&#xff0c;但是因为项目要求&#xff0c;leaf的版本不符合&#xff0c;需要做一些升级 项目地址&#xff1a;https://github.com/Meituan-Dianping/Leaf 升级点&#xff1…

STM32-(串口通信)

什么是通信&#xff1f; 数据交互信息传递条件&#xff1a;两个端 发送端 一、通信基础知识 1、时钟信号划分 同步通信&#xff1a;通信双方根据同步信号通信&#xff0c;比如双方有一个共同的时钟信号(SPI全双工 I2C半双工) 异步通信&#xff1a;通信双方有自己独立的系统时…

Vue3炫酷可旋转的3D地球

首先&#xff0c;我们需要安装Three.js库&#xff1a; npm install three接下来&#xff0c;我们创建一个Vue3项目&#xff0c;并在项目中引入Three.js库。在src/main.js文件中&#xff0c;编写以下代码&#xff1a; import { createApp } from vue import App from ./App.vu…

【解决方案】基于物联网表计的综合能源管理方案

安科瑞顾强 为加快推进国家“双碳”战略和新型能源体系建设&#xff0c;努力实现负荷准确控制和用户精细化管理&#xff0c;按照“政府主导、电网组织、政企协同、用户实施”的指导原则&#xff0c;多地成立市/县级电力负荷管理中心&#xff0c;包括浙江宁波、慈溪、辽宁大连、…

2312skia,13画布包入门

画矶包快速入门 CanvasKit是用比canvasAPI更高级功能集的Skia来绘画元素到canvas中的wasm模块. 最小应用 此例是个最小Canvaskit应用,它为一帧绘画一个圆角矩形.从unpkg.com中提取wasm二进制文件,但你也可自己构建和管理它. <canvas idfoo width300 height300></c…

Java——》JSONObjet 数据顺序

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

Java 普通类和抽象类有哪些区别?

Java 普通类和抽象类有哪些区别&#xff1f; 在Java中&#xff0c;普通类&#xff08;Concrete Class&#xff09;和抽象类&#xff08;Abstract Class&#xff09;是两种不同类型的类&#xff0c;它们有一些关键区别。 普通类&#xff08;Concrete Class&#xff09;&#x…

1_企业架构之LNMP

公司企业架构LNMP(单点服务器部署) 学习目标和内容 1、能够描述项目流程 2、能够了解PV、QPS、DAU等参数 3、能够实现服务器基本环境配置 4、能够部署配置MySQL生产环境 5、能够部署配置Nginx生产环境 6、能够部署配置PHP生产环境 7、能够理解PHP-FPM和Nginx关联关系 8、能够配…

思维模型 逆向思维

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。弱者道之用反者道之动。 1 逆向思维的应用 1.1 历史典故 1 曹冲称象 这个故事讲述的是曹操的儿子曹冲如何利用逆向思维解决了称大象重量的难题。曹冲没有直接去称大象的重量&#xff0c;…

海云安谢朝海:开发安全领域大模型新实践 人工智能助力高效安全左移

2023年11月29日&#xff0c;2023中国&#xff08;深圳&#xff09;金融科技大会成功举行&#xff0c;该会议是深圳连续举办的第七届金融科技主题年度会议&#xff0c;也是2023深圳国际金融科技节重要活动之一。做好金融工作&#xff0c;需要兼顾创新与安全&#xff0c;当智能体…

在表格中显示字典的内容(根据后端返回的数据)vue3

进入页面&#xff0c;调接口&#xff0c;后端返回数据&#xff0c;indexType为0或者1&#xff0c;要用这个数据显示字典的内容 用插槽拿到数据 写一个函数&#xff0c;在模板中使用 const { proxy } getCurrentInstance(); // 字典-指标类型 const { index_type } proxy.u…

谈谈Listener

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 Tomcat三大组件&#x…