位置: IT常识 - 正文

【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型(前端进阶路线)

编辑:rootadmin
【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型

推荐整理分享【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型(前端进阶路线),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端基础进阶,前端技巧,前端进阶教程,前端进阶之旅,前端高手进阶,前端进阶教程,前端tl,前端高手进阶,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【TypeScript专栏】 前两篇文章讲解了TypeScript的一些高级类型 详细内容请阅读如下:🔽 【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性 今天来学习TypeScript另外一些高级类型! 感兴趣的小伙伴一起来看看吧~🤞

文章目录泛型创建泛型函数调用泛型函数泛型约束泛型接口泛型类泛型工具类型1.Partial<Type>2.Readonly<Type>3. Pick<Type, Keys>4. Record<Keys,Type>泛型

泛型是可以在保证类型安全前提下,让函数等与多种类型一起工作,从而实现复用,常用于:函数,接口,class中。

【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型(前端进阶路线)

需求:创建一个id函数,传入什么数据就返回该数据本身(也就是说,参数和返回值类型相同)。

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

比如,id(10)调用以上函数就会直接返回10本身。但是,该函数只接受数值类型,无法用于其他类型。

为了能让函数接受任意类型,可以将参数类型修改为any。但是,这样就失去了TS的类型保护,类型不安全。

传入的类型与返回的类型应该是相同的。如果我们传入一个数字,我们只知道任何类型的值都有可能被返回。

function id(value: any): any { return value }

泛型在保证类型安全(不丢失类型信息)的同时,可以让函数等与多种不同的类型一起工作,灵活可复用。

实际上,在C#和Java等编程语言中,泛型都是用来实现可复用组件功能的主要工具之一。

创建泛型函数function id<Type>(value: Type): Type { return value }

解释:

语法:在函数名称的后面添加<><><>(尖括号),尖括号中添加类型变量,比如此处的Type。类型变量Type,是一种特殊类型的变量,只用于表示类型而不是值。Type类型变量相当于一个类型容器,能够捕获用户传入的类型(比如:number)(具体是什么类型由用户>调用该函数时指定)。因为Type是类型,因此可以将其作为函数参数和返回值的类型,表示参数和返回值具有相同的类型。类型变量Type,可以是任意合法的变量名称。调用泛型函数// 使用泛型创建一个函数:function id<Type>(value: Type): Type { return value}//调用泛型函数:// 1 以number类型调用泛型函数const num = id<number>(10)// 2 以string类型调用泛型函数const str = id<string>('a')// 3 以boolean类型调用泛型函数const ret = id<boolean>(true)

解释:

语法:在函数名称后面添加<><><>(尖括号),尖括号中指定具体的类型,比如,此处的number。当传入类型number后,这个类型就会被函数
本文链接地址:https://www.jiuchutong.com/zhishi/300585.html 转载请保留说明!

上一篇:请求转发与重定向到底有哪些区别?(请求转发与重定义的区别)

下一篇:微信小程序 | 基于ChatGPT实现电影推荐小程序(微信小程序基于什么框架)

  • 支付宝如何解绑生活缴费账户(支付宝如何解绑抖音账号)

    支付宝如何解绑生活缴费账户(支付宝如何解绑抖音账号)

  • 新买的华为p40能更新系统吗(刚买的华为p40pro)

    新买的华为p40能更新系统吗(刚买的华为p40pro)

  • 苹果手机界面变黑色如何改成白色(苹果手机界面变成搜索怎么办)

    苹果手机界面变黑色如何改成白色(苹果手机界面变成搜索怎么办)

  • 表格无法输入文字(表格中无法输入)

    表格无法输入文字(表格中无法输入)

  • opporeno4支持nfc吗(opporeno4带nfc吗)

    opporeno4支持nfc吗(opporeno4带nfc吗)

  • iphonex断触解决方法(iphonex断触完美解决)

    iphonex断触解决方法(iphonex断触完美解决)

  • 拼多多直播间怎么进(拼多多直播间怎么改名字)

    拼多多直播间怎么进(拼多多直播间怎么改名字)

  • 2g,3g,4g,5g是什么意思(直观2g,3g,4g,5g的区别)

    2g,3g,4g,5g是什么意思(直观2g,3g,4g,5g的区别)

  • 华为nova6摄像头旁边的黑条是什么(华为nova6摄像头传感器型号)

    华为nova6摄像头旁边的黑条是什么(华为nova6摄像头传感器型号)

  • 高帧率模式会更流畅吗(高帧率模式耗电吗)

    高帧率模式会更流畅吗(高帧率模式耗电吗)

  • ios不支持此配件怎么办(ios不支持此配件是什么意思)

    ios不支持此配件怎么办(ios不支持此配件是什么意思)

  • oppo手机没消息却震动(oppo手机没消息提示)

    oppo手机没消息却震动(oppo手机没消息提示)

  • cctalk能登录几台手机(cctalk能登录几台电脑)

    cctalk能登录几台手机(cctalk能登录几台电脑)

  • 为啥淘宝买家秀很模糊(淘宝买家秀为什么会消 失)

    为啥淘宝买家秀很模糊(淘宝买家秀为什么会消 失)

  • i5十代和八代区别(十代i5和八代i5)

    i5十代和八代区别(十代i5和八代i5)

  • al键是干什么用的(alpha键是什么意思)

    al键是干什么用的(alpha键是什么意思)

  • 手机号码被别人注册了微信怎么办(手机号码被别人恶意利用)

    手机号码被别人注册了微信怎么办(手机号码被别人恶意利用)

  • 小天才z5参数(小天才Z5参数对比Q1A)

    小天才z5参数(小天才Z5参数对比Q1A)

  • 韩国lg是什么公司(韩国lg公司在哪个城市)

    韩国lg是什么公司(韩国lg公司在哪个城市)

  • pr在c盘的缓存文件在哪(pr缓存在哪个文件夹)

    pr在c盘的缓存文件在哪(pr缓存在哪个文件夹)

  • 探探怎么加好友(探探怎么加好友通讯录)

    探探怎么加好友(探探怎么加好友通讯录)

  • 智联招聘如何发布招聘信息(智联招聘如何发文件)

    智联招聘如何发布招聘信息(智联招聘如何发文件)

  • css解决uniapp使用image标签图片无法撑满全屏问题(uniapp的css库)

    css解决uniapp使用image标签图片无法撑满全屏问题(uniapp的css库)

  • Vue 移动端、PC 端适配(vue移动端pc端适配方案)

    Vue 移动端、PC 端适配(vue移动端pc端适配方案)

  • python列表删除项目的方法(python删除列表的方法)

    python列表删除项目的方法(python删除列表的方法)

  • 建安行业是建筑行业吗
  • 小规模免哪些税
  • 安全生产费计提没用可以冲吗
  • 增值税为什么不用计提
  • 进项认证勾选在哪里操作
  • 冲红重开发票增值税怎么处理
  • 建安业一般纳税人是清包工是什么意思
  • 营改增后企业出售使用过的旧车
  • 季度交的企业所得税怎么做账
  • 公司作为承租方需要交房产税吗
  • 员工工资超过多少钱要交税
  • 商品流通企业会计心得体会3000字
  • 逃避缴纳税款是税收法多少条
  • 财务软件操作指南
  • 以前年度加计扣除的税
  • 预付款和进度款支付有冲突吗
  • 可转换债券赎回和回售如何理解
  • 费用报销交通费
  • 电动汽车的出路在哪里
  • 空头支票怎么办
  • 公司注销退回投资款如何账务处理
  • 企业所得税年报申报时间
  • 劳务报酬所得缴纳时间
  • 库存盘点差异会计分录
  • php实现分页显示
  • 如何修改php网页内容
  • thinkphp yii
  • 材料成本差异怎么结转
  • php生成二维码海报
  • 怎样退出快手粉丝团 已解决
  • phpstudy目录
  • 失控发票成本做账怎么做
  • 城建税退回与不退税区别
  • ps怎么用魔棒选区
  • 业务招待费进项转出报表怎么填
  • 桥接模式例题
  • 货物或应税劳务名称怎么填
  • 原材料的对应账户有哪些
  • 在建工程转出到什么科目
  • 财务风险有什么类别
  • 被财政收回的财物有哪些
  • 部门召开会议
  • 地方水利建设基金减免政策2023
  • 购进材料入库,其价税款通过银行支付
  • 村集体经济组织架构
  • 以前年度财务费用漏记
  • 应收帐款收不回来怎么做会计分录
  • 研发一个月多少钱
  • 会计入职新公司
  • 建账的大体流程有哪些
  • mysql批量更新多条数据
  • xp如何给文件夹加密码
  • Windows Server 2008的节能降耗
  • bios是什么意思的
  • windows查看电池信息
  • windows七如何连接网络
  • winadserv.exe - winadserv是什么进程
  • win10无法双击
  • win10预览版21390
  • 打开字符面板
  • linux怎么把网卡down
  • android studio ndk开发教程
  • ie6浏览器兼容模式怎么设置在哪里
  • javascript 基础
  • using Net::SSH2 shell 的二个方法
  • 微信小程序支付的钱怎么退款
  • node.js介绍
  • node javascript
  • 计算字符串的长度使用哪个函数?
  • java回收机制原理
  • ios异步加载图片
  • 县税务局可以去市里吗
  • 文化服务包括哪些专业
  • 小微企业减半征收房产税
  • 潍坊税务局上班时间表
  • 重庆准生证网上怎么申请领取
  • 贷款抵押担保合同
  • 客运站汽车票查询真伪
  • 美国对中国商品征收关税
  • 酒精税收分类编码查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设