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.hqwc.cn/news/4740.html

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

相关文章

从架构角度看网络安全:数字化时代企业如何构建防御体系?

导语 | 数字化时代,网络安全已经成为企业发展的重中之重,通过体系化的安全建设,企业可以从容应对愈加复杂的网络安全挑战。今天,我们特邀了腾讯云 TVP、赛博英杰科技董事长 谭晓生老师,他将从资深技术专家视角解读如何…

【软考网络管理员】2023年软考网管初级常见知识考点(22)- 交换机配置及命令

涉及知识点 华为交换机配置命令大全,交换机设备参数设置 , 交换机路由器的基本配置,交换机命令汇总 , VLAN 配置 , GVRP 配置 , STP 配置,软考网络管理员常考知识点,软考网络管理员…

STM32外设系列—BH1750

文章目录 一、BH1750简介二、BH1750原理图三、BH1750数据手册3.1 指令集3.2 IIC通信读/写 四、BH1750程序设计4.1 IIC程序4.2 BH1750初始化程序4.3 读取BH1750测量结果4.4 获取光照强度4.5 相关宏定义 五、应用实例六、拓展应用6.1 实时调节LED亮度6.2 实时调整颜色阈值 一、BH…

【C#】云LIS检验医学信息系统源码

系统基于云计算为医院机构改善患者服务质量提供了强有力的支持,“以患者为核心”这一理念得到了充分实现,基于云计算的高效区域医疗信息服务,会为医疗行业带来跨时代的变革。 一、使用技术框架说明 开发语言:C# 6.0、JavaScript …

css 背景颜色级别高于背景图

<div class"bg-parent"> <img :src"employeeImg" class"bg-url" /> <div class"bg"> <el-icon class"plus-icon"> <Plus /> </el-icon> </div> </div> .bg-parent{ //父级…

Tomcat的概念及部署

文章目录 一.Tomcat的概述1.Tomcat介绍2.Tomcat 的主要特点 二.Tomcat的核心组件1.核心组件关系图2.核心组件的介绍2.1 Web容器2.2 servlet容器2.3 JSP容器2.4 Tomcat核心组件的请求方式&#xff08;交互方式&#xff09;2.4.1 Web容器2.4.2 JSP容器2.4.3 serverlet容器 2.5 To…

短视频矩阵-短视频seo源码开发搭建

开发场景&#xff1a;抖音seo&#xff0c;短视频seo&#xff0c;抖音矩阵&#xff0c;短视频矩阵源码开源 一、 短视频矩阵源码需要掌握以下技术&#xff1a; 1. 视频编码技术 短视频矩阵系统利用视频编码技术&#xff0c;将视频文件进行压缩和解压缩&#xff0c;实现了高质…

华为战略方法论:BLM模型之差距分析(限制版)

目录 说明 差距类型 1、业绩差距 2、机会差距 3、对标差距 专栏列表 个人简介 说明 今天就来谈谈 BLM 模型中的第一把钥匙&#xff0c;也就是差距分析。 从本质上来看。 BLM 模型中的差距与你在日常生活中听到或用到的差距在意义都是一样的。 不同之处就在于问题的复…

高级第二个月复习

1.route与router的区别 $route&#xff1a;获取路由信息 指当前路由实例跳转到的路由对象 包括&#xff1a; $route.path 字符串&#xff0c;等于当前路由对象的路径&#xff0c;会被解析为绝对路径&#xff0c;如/home/ews $route.name 当前路由的名字&#xff0c;如果没有使…

探索 Spring Boot 项目全过程

文章目录 &#x1f387;前言1.Spring Boot 所需环境2.Spring Boot 项目创建2.1 安装插件2.2 创建新项目2.3 项目属性配置2.4添加依赖2.4 修改项目名称2.5 添加框架支持2.6 目录介绍 3.判断Spring Boot 创建项目是否成功&#x1f386;总结 &#x1f387;前言 在 Java 这个圈子&…

基于Scrcpy的Android手机屏幕投影到电脑教程

基于Scrcpy的Android手机屏幕投影到电脑教程 文章目录 基于Scrcpy的Android手机屏幕投影到电脑教程一&#xff0c;前言二&#xff0c;具体步骤1.软件下载2.环境配置 三&#xff0c;基于Scrcpy的手机投屏教程1.基于Scrcpy的有线手机投屏2.无线投屏 一&#xff0c;前言 在执行某…

eclipse编辑器汉化;eclipse安装中文插件

eclipse IDE默认是英文环境&#xff0c;使用起来略微不便&#xff0c;汉化还是很有必要的&#xff1b;下面记录一下安装中文插件的过程: 文章目录 一、 选择安装包地址二、 在eclipse安装中文插件2.1 在线安装2.2 手动下载安装包2.3 导入到eclipse 三、汉化插件介绍 一、 选择安…