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

【TypeScript】接口类型 Interfaces 的使用理解

导语
什么是 类型接口

在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。TypeScript 中的 类型接口 是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。在TS中使用 interface 接口来描述对象数据的类型(常用于给对象的属性和方法添加类型约束)

在这里插入图片描述

在 TypeScript 中,如果内部结构兼容,则两种类型是兼容的。这允许我们仅通过具有接口所需的形状来实现接口,而无需显式 实现(implements )子句。所以在 TypeScript 中,我们可以使用接口描述(Interfaces)来定义对象 , 数组 以及函数的类型。


interface 的使用的典型场景:
场景:在常规业务开发中比较典型的就是前后端数据通信的场景

  • 前端向后端发送数据:收集表单对象数据时的类型校验
  • 前端使用后端数据:渲染后端对象数组列表时的智能提示

Interfaces 定义对象类型:

interface IPerson {name: string;age: number;gender: string;callback: (a: number) => number   //此处定义约束了一个 函数方法
}let user: IPerson = {name: '张三',age: 25,gender: "男",callback(a: number) {  //定义函数方法console.log("这是一个函数");return 123 * 10},
};//调用函数
console.log(user.callback(456));  //1230

上面的例子中,我们定义了一个接口 Person,接着定义了一个变量 user,它的类型是 Person。这样,我们就约束了 user 的形状必须和接口 Person 完全一致,不能比接口定义的多,也不能比接口定义的少,且类型也必须同步

接口一般首字母大写:
在这里插入图片描述


可选属性:
有时后我们希望不一定要完全匹配一个形状,那么可以选用可选属性配置:

只需要在 定义接口的时候,在非需要完全匹配的 属性 后面 加上 “?”,就可以

interface IPerson {name: string;age: number;gender?:string;
}let user: IPerson = {name: '张三',age: 25,
};

可选属性的含义是,允许该属性不存在,非必须条件。但是 仍然不允许添加多于接口定义的属性,和接口配置中未定义的属性


任意属性

还有的时候我们,对属性的Key,以及它的值,并不能立马确定下来,就希望定义一个可以拥有任意值的属性

interface IPerson {name: string;age: number;gender?: string;[hobby: string]: any
}let user: IPerson = {name: '张三',age: 25,newproperty: "任意属性值"    //这里定义了,interface  中未定义的属性,因为在接口中,// 配置了任意属性,所以,我们在定义对象的时候,就可以自定义 属性了。//同时 接口中的 gender 属性我们可以不定义,因为 gender 为 “可选属性”};

[ArbitraryvalName: string]: any 定义了 string 类型的属性,和任意类型的值。

注意:

一旦定义了任意属性,并给任意属性值,确定了某个具体类型,那么确定属性和可选属性的类型都必须是它的类型的子集

在这里插入图片描述
一个接口中只能定义一个任意属性。如果任意属性的值,存在多类型,则可以在任意属性中使用联合类型

interface IPerson {name: string;age: number;gender?: string;select?: boolean;[ArbitraryvalName: string]: string | number | boolean    //联合类型
}let user: IPerson = {name: '张三',age: 25,
};

只读属性:

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

interface IPerson {readonly id:numbername: string;age: number;gender?: string;select?: boolean;[ArbitraryvalName: string]: string | number | boolean    //联合类型
}let user: IPerson = {id:123name: '张三',age: 25,
};user.id = 456

在这里插入图片描述

上例中,使用 readonly 定义的属性 id 在初始化后,又被赋值了,所以报错了。约束了,只读属性,在后续中不可以被更改


接口的继承

概念:接口的很多属性是可以进行类型复用的,使用 extends 关键字实现接口继承,实现类型复用

interface IgoodsType {id: numbername: string
}interface IinfoType extends IgoodsType {age: number
}let Obj: IinfoType = {id: 123,name: "李四",age: 25
}

采用接口继承,可以高效复用多个接口类型中的,共有属性类型。

在这里插入图片描述
如果我们缺失了,继承的属性,会被抛出错误警告!!


Interfaces 定义数组(Array)类型:

interface Iarraytype {[index: number]: number   //定义任意属性,index 代表数组中的下标。属性值,约束了数组中的数据类型。以及返回值
}
let arr: Iarraytype = [1, 2, 3, 4, 5]  //关联数组类型

Interfaces 定义函数(function)类型:

interface Ifuntype {  //约束好函数的 规则
//(参数:类型,...):返回值(num: number, digit: number): number
}let fn: Ifuntype = (a, b) => {  //关联函数类型return a + b
}
let c = fn(15, 20);
console.log(c);   //35

本章节,主要梳理了 TypeScript 中 对接口类型【Interfaces】 的使用方式解读。Interfaces使用的场景非常广泛,所以它也是TS中,所必要掌握的知识点。


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

相关文章:

【TypeScript】接口类型 Interfaces 的使用理解

导语: 什么是 类型接口? 在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement&#x…...

2023-07-31 C语言根据错误号打印详细的错误信息perror(““) 或者strerror(errno)

一、C 语言可以使用perror("perror output"); 或 strerror(errno)打印详细的错误信息。 二、需要的头文件#include <errno.h>。 三、实例测试&#xff0c;这里我让open一个linux 底层杂项设备失败的情况&#xff0c;返回的是一个负数&#xff0c;强制返回-EN…...

JDK17和JDK8完美卸载方法及新版JDK安装教程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

FPGA设计时序分析二、建立/恢复时间

目录 一、背景知识 1.1 理想时序模型 1.2 实际时序模型 1.2.1 时钟不确定性 1.2.2 触发器特性 二、时序分析 2.1 时序模型图 ​2.2 时序定性分析 一、背景知识 之前的章节提到&#xff0c;时钟对于FPGA的重要性不亚于心脏对于人的重要性&#xff0c;所有的逻辑运算都离开…...

oracle建立自动增长字段

oracle数据库与其他的数据库不太一样&#xff0c;比如在mysql里自动增长只要设定“auto_increment”即可。可是在oracle里就没有这种配置了。以oracle11g为例&#xff0c;建立自动增长的字段。操作如下&#xff1a; --创建表 create table USERINFO ( ID NUMBER , …...

【Git】远程仓库的创建、SSH协议克隆、拉取、推送

目录 一、创建远程仓库 二、HTTPS协议克隆仓库 三、SSH协议克隆仓库 四、向远程仓库推送 五、从远程仓库拉取 六、忽略特殊文件 七、配置命令别名 一、创建远程仓库 首先我们可以从GitHub或者Gitee中创建自己的个人仓库 工作台 - Gitee.comhttps://gitee.com/ 二、HTT…...

C#之泛型

目录 一、概述 二、C#中的泛型 继续栈的示例 三、泛型类 &#xff08;一&#xff09;声明泛型类 &#xff08;二&#xff09;创建构造类型 &#xff08;三&#xff09;创建变量和实例 &#xff08;四&#xff09;比较泛型和非泛型栈 四、类型参数的约束 &#xff08;一…...

Scrum敏捷开发管理流程+scrum工具免费

Leangoo领歌它覆盖了敏捷项目研发全流程&#xff0c;包括小型团队Scrum敏捷开发&#xff0c;规模化敏捷SAFe&#xff0c;Scrum of Scrums大规模敏捷。它提供了灵活的敏捷模板和极致的协作体验&#xff0c;可以让团队快速上手&#xff0c;快速落地Scrum敏捷开发管理。 首先建立产…...

【操作系统基础】Linux 中 /var/log/ 文件夹下通常有哪一些文件?分别的作用是什么?

在Linux系统中&#xff0c;/var/log/ 文件夹通常包含了系统日志文件&#xff0c;这些文件记录了系统的各种活动和事件&#xff0c;以便管理员进行故障排除和监控。 以下是/var/log/ 文件夹中常见的一些文件及其含义&#xff1a; auth.log&#xff1a;记录系统认证和授权相关的…...

【构造】CF1758 C

Problem - 1758C - Codeforces 题意&#xff1a; 思路&#xff1a; 思路&#xff1a; #include <bits/stdc.h>#define int long longusing namespace std;const int mxn2e510; const int mxe2e510;int N,x; int ans[mxn];void solve(){cin>>N>>x;if(N%x!0)…...

【etcd】docker 启动单点 etcd

etcd: v3.5.9 etcd-browser: rustyx/etcdv3-browser:latest 本文档主要描述用 docker 部署单点的 etcd&#xff0c; 用 etcd-browser 来查看注册到 etcd 的 key 默认配置启动 docker run -d --name ai-etcd --networkhost --restart always \-v $PWD/etcd.conf.yml:/opt/bitn…...

【单链表OJ题:反转链表】

题目来源 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* reverseList(struct ListNode* head){struct ListNode* current head;struct ListNode* newnode NULL;while(current!NULL){struc…...

Unity UGUI的LayoutRebuilder的介绍及使用

Unity UGUI的LayoutRebuilder的介绍及使用 1. 什么是LayoutRebuilder&#xff1f; LayoutRebuilder是Unity UGUI中的一个组件&#xff0c;用于自动重建布局。它可以根据UI元素的变化&#xff0c;自动调整其子元素的位置和大小&#xff0c;以保持布局的一致性。 2. LayoutReb…...

深刻理解python特性-列表推导式和生成器表达式

哈喽大家好&#xff0c;今天给大家介绍两个Python中特性-列表推导式和生成器表达式 今天我想向你介绍python语言的两个非常有用的特性&#xff1a;列表推导式和生成器表达式。这两个特性都可以让你用一行简洁的代码来创建一个序列&#xff0c;而不需要写循环或者函数。但是它们…...

Sentinel dashboard的使用;Nacos保存Sentinel限流规则

Sentinel dashboard的使用 往期文章 Nacos环境搭建Nacos注册中心的使用Nacos配置中心的使用Sentinel 容灾中心的使用 参考文档 Sentinel alibaba/spring-cloud-alibaba Wiki GitHub 限流结果 下载sentinel-dashboard github地址&#xff1a;Sentinel/sentinel-dashboar…...

vue学习之插值表达式{{}}与显示数据(v-text和v-html)

1. 记得导入 <!-- 在线导入 --> <!-- 开发环境版本&#xff0c;包含了用帮助的命令行警告 --> <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本&#xff0c;优化了尺寸和速度 --> <scri…...

2,认识N(logN)的排序【p3】

认识N( logN} 的排序 2.1归并排序2.1.1代码实现归并排序2.1.1.1自己c实现归并排序2.1.1.2gptc实现归并排序2.1.1.3总结2.1.1.4比较行为 2.1.2归并排序使用master公式2.1.3归并排序的扩展2.1.3.1小和问题2.1.3.2逆序对问题 2.2快排、荷兰国旗问题2.2.1问题一2.2.2问题二(荷兰国旗…...

华为机考--服务失效判断--带答案

新2023年华为OD真题机考题库大全-带答案&#xff08;持续更新)or2023华为OD统一考试&#xff08;AB卷&#xff09;题库清单-带答案&#xff08;持续更新&#xff09; 题目描述 某系统中有众多服务&#xff0c;每个服务用字符串&#xff08;只包含字母和数字&#xff0c;长度<…...

C++对C的加强(全)

目录 C对C的加强 命名空间 为什么要使用命名空间 怎么使用命名空间 命名空间的定义 命名空间的使用 使用域解析符 :: 使用using声明 内联命名空间 嵌套命名空间 随时将新的成员加入命名空间 命名空间中 函数的声明和实现分开 无名命名空间 命名空间取别名 使用u…...

ES6及以上新特性

ES6&#xff08;ECMAScript 2015&#xff09;及以上版本引入了许多新特性&#xff0c;每个版本都有不同的增强和改进。以下是 ES6 及以上版本的新特性的详细描述&#xff1a; ES6&#xff08;ECMAScript 2015&#xff09;&#xff1a; let 和 const 声明&#xff1a;引入块级作…...

快速搭建stm32f103c8t6引脚验证原型:快马平台一键生成初始化代码

最近在做一个基于STM32的小项目时&#xff0c;发现每次新建工程都要重复配置引脚功能&#xff0c;特别浪费时间。后来发现用InsCode(快马)平台可以快速生成初始化代码&#xff0c;简直打开了新世界的大门。今天就来分享下如何用这个平台快速搭建STM32F103C8T6的引脚验证原型。 …...

Nano Banana进阶指南:从动漫角色到真人手办场景的AI创意融合

1. Nano Banana创意工作流全解析 第一次接触Nano Banana时&#xff0c;我就被它强大的图像生成能力震撼了。但真正让我着迷的&#xff0c;是它能够将动漫角色、真人cosplay和手办场景这三个看似独立的元素完美融合的能力。这种"三位一体"的创作方式&#xff0c;不仅打…...

RobotStudio机器人轨迹规划:从工件坐标到流畅路径的实战指南

1. 工件坐标系的创建与校准 在RobotStudio中规划机器人轨迹的第一步&#xff0c;就是建立准确的工件坐标系。这就像盖房子前要先打好地基&#xff0c;坐标系就是机器人运动的"地基"。我见过不少新手直接开始示教点位&#xff0c;结果发现机器人总是跑偏&#xff0c;就…...

一文读懂:控制界的万能公式——PID算法到底是什么?

一文读懂:控制界的万能公式——PID算法到底是什么? 对于每一位踏入工科大门的学生或是初入职场的工程师来说,在自动控制、机器人、电子工程等领域,有一个名字几乎如影随形——PID算法。从天上飞的四轴无人机,到地上跑的平衡小车;从化工厂里庞大的反应釜,到你家中安静运转…...

Calypso vs PC-DMIS:三坐标两大软件脱机编程实战对比与选型指南

Calypso vs PC-DMIS&#xff1a;三坐标测量软件脱机编程深度对比与实战选型策略 在精密制造领域&#xff0c;三坐标测量机(CMM)的脱机编程能力直接决定了检测效率与资源利用率。作为行业两大标杆&#xff0c;蔡司Calypso与海克斯康PC-DMIS在用户界面设计、编程逻辑、仿真验证等…...

STM32CubeIDE用DAP下载器?这份OpenOCD配置文件修改与复位难题解决指南请收好

STM32CubeIDE深度调优&#xff1a;DAP下载器OpenOCD配置与自动复位难题实战解析 当你在STM32CubeIDE中切换ST-LINK与DAP调试器时&#xff0c;是否注意到两者在用户体验上的显著差异&#xff1f;特别是当使用DAP调试器时&#xff0c;每次下载后都需要手动复位开发板才能运行程序…...

【AI编程工具系列:第13篇】华为CodeArts与豆包MarsCode实战:企业级AI编程工具深度对比

摘要 本文全面对比分析华为CodeArts和豆包MarsCode两款企业级AI编程工具。华为CodeArts凭借三层融合架构&#xff08;AI原生IDE集成层、代码智能体引擎层、Codebase语义索引系统层&#xff09;&#xff0c;在安全合规、信创兼容和私有化部署方面表现卓越&#xff0c;代码补全延…...

BabyOS:MCU裸机开发的轻量级框架解析

1. BabyOS&#xff1a;专为MCU裸机开发设计的轻量级框架 在嵌入式开发领域&#xff0c;重复造轮子一直是困扰工程师的痛点。每次新项目启动&#xff0c;我们总需要重新调试那些基础功能模块——从串口通信到Flash操作&#xff0c;从定时器管理到协议栈实现。BabyOS的出现&#…...

Jenkins vs GitLab CI/CD:2026 企业级 CI/CD 工具深度选型评测

Jenkins vs GitLab CI/CD&#xff1a;2026 企业级 CI/CD 工具深度选型评测 作为在 CI/CD 领域摸爬滚打十余年的全栈老兵&#xff0c;我见证了从手工部署到云原生 DevOps 的完整演进。今天&#xff0c;我们将抛开宗教战争式的争论&#xff0c;用真实数据和生产环境案例&#xff…...

Android设备指纹采集指南:从get_token协议看短视频SDK如何生成唯一设备ID

Android设备指纹生成机制深度解析&#xff1a;从基础原理到合规实践 在移动应用生态中&#xff0c;设备指纹技术扮演着至关重要的角色。它不仅关系到用户体验的连贯性&#xff0c;更是风控系统的基础支撑。本文将系统性地剖析Android平台下设备指纹的生成逻辑、技术实现方案以及…...