当前位置: 首页 > 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 的实际使用选择,这个就要 见仁见智了,我们只需要去了解认识它们的不同点,把选择留个他人…,毕竟给别人多一种选择的空间


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

相关文章:

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

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

策略路由实现多ISP接入Internet

组网需求&#xff1a; 企业分别从ISP1和ISP2租用了一条链路 PC3用户上网访问Server1时走ISP1PC4用户上网访问Server1时走ISP2 拓扑图 一、ISP1 运营商 R1路由器 <Huawei>sys [Huawei]sys R1 [R1]un in en[R1]int g0/0/0 [R1-GigabitEthernet0/0/0]ip addr 2.2.2.2 2…...

Socket本质、实战演示两个进程建立TCP连接通信的过程

文章目录 Socket是什么引入面试题, 使你更深刻的理解四元组 Socket网络通信大体流程实战演示TCP连接建立过程需要用到的linux 查看网络的一些命令测试的程序一些准备工作启动服务端, 并没有调用accept启动客户端开启服务accept Socket是什么 通俗来说,Socket是套接字,是一种编…...

java学习路程之篇四、进阶知识、石头迷阵游戏、绘制界面、打乱石头方块、移动业务、游戏判定胜利、统计步数、重新游戏

文章目录 1、绘制界面2、打乱石头方块3、移动业务4、游戏判定胜利5、统计步数6、重新游戏7、完整代码 1、绘制界面 2、打乱石头方块 3、移动业务 4、游戏判定胜利 5、统计步数 6、重新游戏 7、完整代码 java之石头迷阵单击游戏、继承、接口、窗体、事件、组件、按钮、图片...

Git全栈体系(三)

第六章 GitHub 操作 一、创建远程仓库 二、远程仓库操作 命令名称作用git remote -v查看当前所有远程地址别名git remote add 别名 远程地址起别名git push 别名 分支推送本地分支上的内容到远程仓库git clone 远程地址将远程仓库的内容克隆到本地git pull 远程库地址别名 远…...

JMeter发送get请求并分析返回结果

在实际工作的过程中&#xff0c;我们通常需要模拟接口&#xff0c;来进行接口测试&#xff0c;我们可以通过JMeter、postman等多种工具来进行接口测试&#xff0c;但是工具的如何使用对于我们来说并不是最重要的部分&#xff0c;最重要的是设计接口测试用例的思路与分析结果的能…...

HTML笔记(1)

介绍 浏览器中内置了HTML的解析引擎&#xff0c;通过解析标记语言来展现网页&#xff1b;HTML标签都是预定义好的&#xff1b;Java工程师&#xff1a;后台代码的编写&#xff0c;和数据库打交道&#xff0c;把数据给网页前端的工程师&#xff1b;网页前端工程师&#xff1a;写H…...

重新审视MHA与Transformer

本文将基于PyTorch源码重新审视MultiheadAttention与Transformer。事实上&#xff0c;早在一年前博主就已经分别介绍了两者&#xff1a;各种注意力机制的PyTorch实现、从零开始手写一个Transformer&#xff0c;但当时的实现大部分是基于d2l教程的&#xff0c;这次将基于PyTorch…...

Docker 全栈体系(七)

Docker 体系&#xff08;高级篇&#xff09; 五、Docker-compose容器编排 1. 是什么 Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;写好多个容器之间的调…...

【编程范式】聊聊什么是数据类型和范式的本质

什么是编程范式 范式其实就是做事的方式&#xff0c;编程范式可以理解为如何编程&#xff0c;按照什么样的模式或者风格进行编程。 编程范式包含哪些 泛型编程函数式编程面向对象编程编程本质和逻辑编程 虽然有不同的编程范式&#xff0c;但是对于目的来说都是为了解决同一…...

2023-08-01 python根据x轴、y轴坐标(数组)在坐标轴里画出曲线图,python 会调用鼎鼎大名的matlib,用来分析dac 数据

一、python 源码如下 import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt#x[0 ,1,2,3,5,6,10] #y[0,0,3,4,5,7,8]# { 0 , 1 , 0x0003 },// 0 # { 0XFFFF * 1 / 10 , 3006 , 0x0a6b },// 1 # { 0XFFFF * 2 / 10 , 599…...

小研究 - 主动式微服务细粒度弹性缩放算法研究(四)

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放&#xff0c;忽略了能够充分利用单台服务器资源的细粒度垂直缩放&#xff0c;从而导致资源浪费。为此&#xff0c;本文设计了主动式微服务细粒度弹性缩放算法…...

机器学习深度学习——softmax回归的简洁实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——softmax回归从零开始实现 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你…...

CPU利用率过高解决思路

文章目录 问题场景问题定位问题解决 本文参考&#xff1a; Linux服务器之CPU过高解决思路_linux cpu温度过高_Jeremy_Lee123的博客-CSDN博客 Java程序员必备&#xff1a;jstack命令解析 - 掘金 (juejin.cn) 重点问题&#xff01;CPU利用率过高排查思路&#xff5c;原创 (qq.…...

Redis(三)—— Redis基本的事务操作、Redis实现乐观锁

一、Redis基本的事务操作 首先声明&#xff1a; redis的单条命令是保证原子性的&#xff08;回想一下setnx k1 v1 k5 v5命令如果k1已经存在&#xff0c;那么k5也会设置失败&#xff09;但是redis的事务不保证原子性&#xff01;见下面“1.2 某条命令有错怎么办&#xff1f;”…...

SQLI_LABS攻击

目录 Less1 首先来爆字段 联合注入 判断注入点 爆数据库名 爆破表名 information_schema information_schmea.tables group_concat() 爆破列名 information_schema.columns 爆值 SQLMAP Less-2 -4 Less -5 布尔 数据库 表名 字段名 爆破值 SQLMAP Less-6 …...

如何查看 Chrome 网站有没有前端 JavaScript 报错?

您可以按照以下步骤在Chrome中查看网站是否存在前端JavaScript报错&#xff1a; 步骤1&#xff1a;打开Chrome浏览器并访问网站 首先&#xff0c;打开Chrome浏览器并访问您想要检查JavaScript报错的网站。 步骤2&#xff1a;打开开发者工具 在Chrome浏览器中&#xff0c;按…...

JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

读取base64图片File file2Base64Image(file, cb) {const reader new FileReader();reader.readAsDataURL(file);reader.onload function (e) {cb && cb(e.target.result);//即为base64结果}; }, 读取text、JSON文件File readText(file, { onloadend } {}) {const re…...

【项目方案】OpenAI流式请求实现方案

文章目录 实现目的效果比对非stream模式stream模式实现方案方案思路总体描述前端方案对比event-source-polyfill代码示例前端实现遇到的问题与解决方法后端参考资料时序图关键代码示例后端实现时遇到的问题与解决方法实现目的 stream是OpenAI API中的一个参数,用于控制请求的…...

华为数通HCIP-IP组播基础

点到点业务&#xff1a;比如FTP&#xff0c;WEB业务&#xff0c;此类业务主要特点是不同的用户有不同的需求&#xff0c;比如用户A需要下载资料A&#xff0c;用户B需要下载资料B。此类业务一般由单播承载&#xff0c;服务器对于不同用户发送不同的点到点数据流。 ospf、isis…...

GLM-OCR场景应用:教育资料数字化、商务文档信息抽取实战

GLM-OCR场景应用&#xff1a;教育资料数字化、商务文档信息抽取实战 1. 引言&#xff1a;文档智能化的时代需求 在信息爆炸的今天&#xff0c;我们每天都要处理大量纸质文档和电子文件。教育机构需要将历年试卷数字化归档&#xff0c;企业财务部门要处理堆积如山的发票和合同…...

OpenClaw多模态探索:Qwen3-32B+RTX4090D镜像截图转报告实践

OpenClaw多模态探索&#xff1a;Qwen3-32BRTX4090D镜像截图转报告实践 1. 为什么选择这个技术组合 上周团队头脑风暴时&#xff0c;我遇到了一个典型痛点&#xff1a;会议室白板上写满了讨论要点&#xff0c;但拍照后整理成电子版纪要需要手动誊写半小时。作为技术负责人&…...

QT窗口特效实战:从透明到异形控件的全方位实现指南

1. 从零开始理解QT窗口特效 第一次接触QT窗口特效时&#xff0c;我被那些酷炫的透明和异形界面深深吸引。记得当时看到Mac OS X的Dock栏那种毛玻璃效果&#xff0c;就特别想在自己的QT应用中实现类似效果。经过多年实战&#xff0c;我发现QT实现这些特效其实比想象中简单得多。…...

Zotero文献管理终极指南:从混乱到高效的研究工作流

Zotero文献管理终极指南&#xff1a;从混乱到高效的研究工作流 【免费下载链接】zotero Zotero is a free, easy-to-use tool to help you collect, organize, annotate, cite, and share your research sources. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero Z…...

IntelliJ IDEA突然无法启动的快速修复指南

1. IntelliJ IDEA突然无法启动的常见原因 作为一名常年与IntelliJ IDEA打交道的开发者&#xff0c;我遇到过无数次IDE突然罢工的情况。最让人头疼的是&#xff0c;明明昨天还用得好好的&#xff0c;今天双击图标却毫无反应。这种情况通常由以下几个原因导致&#xff1a; 首先是…...

用DolphinScheduler实现数仓自动化:从零搭建ETL工作流实战

用DolphinScheduler构建电商数仓ETL流水线&#xff1a;实战设计与优化指南 电商平台每天产生的TB级订单数据&#xff0c;如何转化为精准的用户画像和实时销售报表&#xff1f;本文将带你从零搭建一个基于DolphinScheduler的自动化数据处理流水线&#xff0c;解决实际业务场景中…...

告别PS!用WPS宏批量改图片尺寸的隐藏技巧(附JSA API避坑指南)

告别PS&#xff01;用WPS宏批量改图片尺寸的隐藏技巧&#xff08;附JSA API避坑指南&#xff09; 在电商运营、教育培训等日常工作中&#xff0c;批量处理图片是刚需。传统做法要么依赖Photoshop等专业软件&#xff08;学习成本高&#xff09;&#xff0c;要么手动逐个调整&…...

Qt5新手必看:3分钟搞定你的第一个控制台程序(附完整代码)

Qt5入门实战&#xff1a;从零构建控制台应用的完整指南 引言&#xff1a;为什么选择Qt5作为开发起点&#xff1f; 对于刚接触C图形界面开发的程序员来说&#xff0c;Qt框架提供了一个绝佳的起点。它不仅拥有跨平台特性&#xff0c;还具备完善的工具链和丰富的模块库。控制台程序…...

嵌入式通信协议SPI/I2C/UART原理与应用

嵌入式通信协议原理图解与技术解析1. 串行通信协议基础1.1 SPI通信协议SPI(Serial Peripheral Interface)是一种全双工、同步串行通信协议&#xff0c;采用主从架构设计。其核心特点包括&#xff1a;四线制结构&#xff1a;SCLK(时钟)、MOSI(主出从入)、MISO(主入从出)、SS(片选…...

【Python多解释器隔离终极指南】:20年CTO亲授GIL绕过术、内存隔离与并发安全实战(附可运行代码库)

第一章&#xff1a;Python多解释器隔离的核心概念与演进脉络Python长期以来以全局解释器锁&#xff08;GIL&#xff09;为标志性设计&#xff0c;单进程内仅能存在一个活跃的CPython解释器状态&#xff08;PyInterpreterState&#xff09;&#xff0c;这使得“多解释器”长期处…...