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

news2024/11/18 13:22:57

导语:

在前面章节中,我们了解到 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.coloradmin.cn/o/694713.html

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

相关文章

ansible - 安装 -【kodcloud教程】

目录 目录结构、主机清单 【1】安装基础环境 【2】webserver - 安装nginx 【3】安装php环境 【4】lb-server 【5】redis安装 【6】 kodcloud 【7】wordpress-proxy ansible10.0.0.10lb-server10.0.0.11web0110.0.0.15web0210.0.0.16redis10.0.0.20 目录结构、主机清单…

[python][yolov7][深度学习]将yolov7实例分割成一个类几句代码完成实例分割任务

大家都知道,yolov7目前支持图像分类、目标检测和实例分割,而实例分割一般都是用predict.py去预测图片这个如果要引入pyqt5或着嵌入其他python模块有点麻烦,因此需要封装一个类去预测图像,这样我们可以轻松完成各种实例分割任务,封…

virtualbox安装已有的虚拟硬盘文件

按照网上安装virtualbox虚拟机操作,我是安装已有的虚拟硬盘文件。 名称是虚拟机的名称,文件夹是虚拟机安装的文件夹建议大一点。 分配内存: 对于第一次安装已有的vdi虚拟硬盘文件,这里并没有任何显示(我下面已经添…

EA代码逆向工程

下载安装 链接:https://pan.baidu.com/s/1xQ2q-_cSt_DTI3zIDvxkFw 提取码:wq83 使用教程: 构建类图 打开EA,点击左上角的图标新建项目。 起一个项目名称,"逆向工程测试"。 新建好后的页面: …

Bootstrap 网格系统

文章目录 Bootstrap 网格系统什么是网格(Grid)?什么是 Bootstrap 网格系统(Grid System)?移动设备优先策略内容布局渐进增强 Bootstrap 网格系统(Grid System)的工作原理媒体查询网格…

自学黑客(网络安全),一般人我劝你还是算了吧(自学网络安全学习路线--第十一章 网络安全技术下)【建议收藏】

文章目录 一、自学网络安全学习的误区和陷阱二、学习网络安全的一些前期准备三、自学网络安全学习路线一、入侵检测系统1、入侵检测系统模型2、入侵检测系统分类3、入侵检测系统部署 二、VPN1、VPN工作原理2、VPN的优点3、VPN的分类4、VPN的工作原理5、VPN的主要技术 一、自学网…

使用OpenXML库替换docx文档(Word文档)中的特定字段

在批量生成Word文档的应用中,最常见的需求莫过于替换掉文档中的特定字段以生成新的文档。利用OpenXML库可轻松实现这一需求。 不完善版本 首先放出最简单然而有bug的版本: using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.Wor…

第6讲:使用ajax技术实现模拟百度搜索功能(xml数据)

使用ajax技术实现模拟百度搜索功能,本案例使用原生态xmlhttprequest对象,GET方法通讯,后台使用map保存搜索数据,查询到对应数据后,返回xml格式数据,前端使用responseXML属性返回xml格式数据,结合…

6.安卓移动端开发

开发概览 Android官网 提供了开发环境,也就是android平台,即android SDK,即android版本 SDK版本和API版本的关系(安卓的版本是个位数和小数形式增长,API版本是以个位数正则,所以API版本号和android版本号不…

图像梯度——Sobel、Scharr、Laplacian

图像梯度-Sobel算子 dst cv2.Sobel(src, ddepth, dx, dy, ksize) src: 图像数组变量ddepth: 图像的深度,一般填-1,表示与原始图像深度一致; cv2.CV_64F表示每一个像素点值为64位浮点数,是OpenCV定义的数据类型dx和dy分别表示水平…

车端服务器架构「升级」

过去几年,随着整车电子架构从分布式向集中式升级,域控制器(通常分为五大域:动力域、底盘域、座舱域、智驾域、车身域)带动供应链进入增值周期,背后隐藏的则是供应商的洗牌。 以座舱为例,从传统的…

远程桌面发生身份验证错误,要求的函数不受支持

windows10专业版: 解决方法: 使用微软官方建议修改本地组策略: winr弹出运行窗口,输入gpedit.msc,打开本地组策略 计算机配置>管理模板>系统>凭据分配>加密Oracle修正 选择启用并选择易受攻击。 windows10家庭版&a…

Bug - 为什么不能打开Tmocat官网

今天在敲代码的时候碰到一个bug,登录不上Tmocat官网,后来查了查是不能使用代理模式进行连接网站: 解决方法,换成手机WIFE热点: 登录成功: 小开心^_^

445端口是啥?445端口怎么关闭?

445端口是Windows系统中的SMB协议,用于文件共享和网络打印功能。然而,这个端口也是黑客攻击的重要入口之一。那么,如何关闭445端口,保护自己的计算机安全呢? 关闭445端口的方法 1.在“控制面板”中打开“管理员工具”…

用华为云低代码Astro Zero10分钟搭建 “图书馆数据可视化大屏” 应用

作者:福州司马懿 原文链接:使用Astro Zero带你从零开始,10分钟搭建一套 “图书馆数据可视化大屏” 应用【华为云Astro低代码体验季】-云社区-华为云 产品介绍 点击下方链接进入工具页:https://auth.huaweicloud.com/authui/logi…

移远通信定位定向GNSS模组LC02H正式发布,提供可靠的航向、姿态、位置等信息

6月26日,全球领先的物联网整体解决方案供应商移远通信宣布,正式推出其自主研发的双天线定位定向GNSS模组LC02H,进一步丰富其GNSS产品线。 LC02H具有高性能、高稳定性、低功耗的特点,可为基站通信天线、工程机械姿态控制、舰船定位…

【方法】想把PDF文档转换成PPT,如何操作?

很多小伙伴在工作中,会使用PDF或者PPT来展示内容。那如果需要把PDF转换成PPT,要如何操作呢? 我们知道,PPT转换成PDF很容易操作,只需通过PPT的【导出】选项,就可以直接转换成PDF;还可以通过“另…

【UE Cesium】01-在虚幻5中使用Cesium

UE版本:5.1 步骤 1. 首先我们新建一个空白的工程 2. 在虚幻商城中搜索“Cesium for Unreal”,然后点击“安装到引擎” 3. 在虚幻编辑器中搜索插件“cesium”,勾选如下插件,然后重启编辑器 4. 重启后我们新建一个空白关卡 保存关卡…

DAY31——贪心

1.分发饼干 class Solution {public int findContentChildren(int[] g, int[] s) {Arrays.sort(g);Arrays.sort(s);int start 0;int count 0;for (int i 0; i < s.length && start < g.length; i) {if (s[i] > g[start]) {start;count;}}return count;} } …

软测实验室质量手册中结构要求部分如何满足

根据cnas官方指定的文件中要求&#xff0c;cnas软件检测机构应是一个能够承担法律责任的实体。 实验室所从事检测和校准工作应符合本准则的要求&#xff0c;并能满足客户、法定管理机构或对其提供承认的组织的需求。管理体系应覆盖实验室固定设施、离开固定设施的场所或相关的临…