当前位置: 首页 > news >正文

TypeScript 【type】关键字的进阶使用方式

导语:

在前面章节中,我们了解到 TS 中 type 这个关键字,常常被用作于,定义 类型别名,用来简化或复用复杂联合类型的时候使用。同时也了解到 为对象定义约束接口类型 的时候所使用的是 Interfaces

在这里插入图片描述

其实对于前面,所描述的点,type一个人就可以实现,也就是说 type 除了可以用来定义 类型别名 外, Interfaces 所拥有的功能,type 也同样可以实现,来为对象,数组,函数约束接口类型。所以本章节就来聊聊 type 是如何像 Interfaces 一样来约束类型接口的。


如下案例:
通过type来约束对象类型

type userinfo = {id: number,name: string,
}let obj: userinfo = {id: 123,name: "李四"
}
console.log(obj);  //{id: 123, name: '李四'}

同样也能在对象中,约束定义 可选属性,以及函数事件方法


type userinfo = {id: number,name: string,age?: number,  //可选属性fn: () => void
}let obj: userinfo = {id: 123,name: "李四",fn() {console.log("这是type 定义的 函数方法");},
}
console.log(obj); 

type 定义函数的接口类型

type fn = {(num: number, digit: number): number
}let fun: fn = (a, b) => {console.log("这是一个函数");return a + b
}console.log(fun(5, 4));  //9

type 定义数组的接口类型

type arr = {[index: number]: number
}let array: arr = [1, 2];

其实截止到目前为止,type 还没有表现出区别于 Interfaces 的地方。


接下来,我介绍的两点就能看出来 type 区别于 Interfaces 的地方。

区别一: 接口类型的继承

在之前讲过,Interfaces 定义接口类型的时候,要想实现多个接口类型继承,是通过 extends 关键字来继承关联的。

type 中,采用 交叉类型 来实现继承。

type 配合交叉类型 (&)可以模拟继承,同样也可以实现类型复用

//父接口
type userinfo = {id: number,name: string,
}//子接口继承
type info = userinfo & {  // 通过 “&” 来 实现继承age?: number,  fn: () => void
}let obj: info = {id: 123,name: "李四",fn() {console.log("这是type 定义的 函数方法");},
}
console.log(obj);

语法结构:type 类型名 = 继承类型 & { 自己新增的类型 }

区别二:

interface 实现继承,遇到同名属性或同类型名,后者会覆盖前者,而 type 会进行严格报错约束来把控风险。

在这里插入图片描述


总结

本章节分享了,type关键字 除了我们常见的,被用作于 类型别名,之外的一些进阶使用方法,使它也能够像 interface 一样来约束对象,数组,函数的接口数据类型。同时又保留了一些,独特的语法特点,用来区别于 interface

对于 interface type 的实际使用选择,这个就要 见仁见智了,我们只需要去了解认识它们的不同点,把选择留个他人…,毕竟给别人多一种选择的空间


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

http://www.lryc.cn/news/104716.html

相关文章:

  • 策略路由实现多ISP接入Internet
  • Socket本质、实战演示两个进程建立TCP连接通信的过程
  • java学习路程之篇四、进阶知识、石头迷阵游戏、绘制界面、打乱石头方块、移动业务、游戏判定胜利、统计步数、重新游戏
  • Git全栈体系(三)
  • JMeter发送get请求并分析返回结果
  • HTML笔记(1)
  • 重新审视MHA与Transformer
  • Docker 全栈体系(七)
  • 【编程范式】聊聊什么是数据类型和范式的本质
  • 2023-08-01 python根据x轴、y轴坐标(数组)在坐标轴里画出曲线图,python 会调用鼎鼎大名的matlib,用来分析dac 数据
  • 小研究 - 主动式微服务细粒度弹性缩放算法研究(四)
  • 机器学习深度学习——softmax回归的简洁实现
  • CPU利用率过高解决思路
  • Redis(三)—— Redis基本的事务操作、Redis实现乐观锁
  • SQLI_LABS攻击
  • 如何查看 Chrome 网站有没有前端 JavaScript 报错?
  • JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
  • 【项目方案】OpenAI流式请求实现方案
  • 华为数通HCIP-IP组播基础
  • STM32 SPI学习
  • 分布式缓存与数据库的一致性记录
  • vue3的语法
  • 【git合并分支自定义提交消息】
  • AttributeError: module ‘PyQt5.QtGui‘ has no attribute ‘QMainWindow‘
  • 基于Java+SpringBoot+Vue前后端分离电商项目
  • Rpc服务消费者(Rpc服务调用者)实现思路
  • FANUC机器人实现2个RO输出信号互锁关联(互补)的具体方法
  • 权威认可|云畅科技再次入选中国信通院「高质量数字化转型产品及服务全景图」
  • 爬虫小白-如何调试列表页链接与详情链接不一样并三种方式js逆向解决AES-ECB
  • Ubuntu 离线部署的常见操作