【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>。 三、实例测试,这里我让open一个linux 底层杂项设备失败的情况,返回的是一个负数,强制返回-EN…...
JDK17和JDK8完美卸载方法及新版JDK安装教程
🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…...
FPGA设计时序分析二、建立/恢复时间
目录 一、背景知识 1.1 理想时序模型 1.2 实际时序模型 1.2.1 时钟不确定性 1.2.2 触发器特性 二、时序分析 2.1 时序模型图 2.2 时序定性分析 一、背景知识 之前的章节提到,时钟对于FPGA的重要性不亚于心脏对于人的重要性,所有的逻辑运算都离开…...
oracle建立自动增长字段
oracle数据库与其他的数据库不太一样,比如在mysql里自动增长只要设定“auto_increment”即可。可是在oracle里就没有这种配置了。以oracle11g为例,建立自动增长的字段。操作如下: --创建表 create table USERINFO ( ID NUMBER , …...
【Git】远程仓库的创建、SSH协议克隆、拉取、推送
目录 一、创建远程仓库 二、HTTPS协议克隆仓库 三、SSH协议克隆仓库 四、向远程仓库推送 五、从远程仓库拉取 六、忽略特殊文件 七、配置命令别名 一、创建远程仓库 首先我们可以从GitHub或者Gitee中创建自己的个人仓库 工作台 - Gitee.comhttps://gitee.com/ 二、HTT…...
C#之泛型
目录 一、概述 二、C#中的泛型 继续栈的示例 三、泛型类 (一)声明泛型类 (二)创建构造类型 (三)创建变量和实例 (四)比较泛型和非泛型栈 四、类型参数的约束 (一…...
Scrum敏捷开发管理流程+scrum工具免费
Leangoo领歌它覆盖了敏捷项目研发全流程,包括小型团队Scrum敏捷开发,规模化敏捷SAFe,Scrum of Scrums大规模敏捷。它提供了灵活的敏捷模板和极致的协作体验,可以让团队快速上手,快速落地Scrum敏捷开发管理。 首先建立产…...
【操作系统基础】Linux 中 /var/log/ 文件夹下通常有哪一些文件?分别的作用是什么?
在Linux系统中,/var/log/ 文件夹通常包含了系统日志文件,这些文件记录了系统的各种活动和事件,以便管理员进行故障排除和监控。 以下是/var/log/ 文件夹中常见的一些文件及其含义: auth.log:记录系统认证和授权相关的…...
【构造】CF1758 C
Problem - 1758C - Codeforces 题意: 思路: 思路: #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, 用 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? LayoutRebuilder是Unity UGUI中的一个组件,用于自动重建布局。它可以根据UI元素的变化,自动调整其子元素的位置和大小,以保持布局的一致性。 2. LayoutReb…...
深刻理解python特性-列表推导式和生成器表达式
哈喽大家好,今天给大家介绍两个Python中特性-列表推导式和生成器表达式 今天我想向你介绍python语言的两个非常有用的特性:列表推导式和生成器表达式。这两个特性都可以让你用一行简洁的代码来创建一个序列,而不需要写循环或者函数。但是它们…...
Sentinel dashboard的使用;Nacos保存Sentinel限流规则
Sentinel dashboard的使用 往期文章 Nacos环境搭建Nacos注册中心的使用Nacos配置中心的使用Sentinel 容灾中心的使用 参考文档 Sentinel alibaba/spring-cloud-alibaba Wiki GitHub 限流结果 下载sentinel-dashboard github地址:Sentinel/sentinel-dashboar…...
vue学习之插值表达式{{}}与显示数据(v-text和v-html)
1. 记得导入 <!-- 在线导入 --> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> <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真题机考题库大全-带答案(持续更新)or2023华为OD统一考试(AB卷)题库清单-带答案(持续更新) 题目描述 某系统中有众多服务,每个服务用字符串(只包含字母和数字,长度<…...
C++对C的加强(全)
目录 C对C的加强 命名空间 为什么要使用命名空间 怎么使用命名空间 命名空间的定义 命名空间的使用 使用域解析符 :: 使用using声明 内联命名空间 嵌套命名空间 随时将新的成员加入命名空间 命名空间中 函数的声明和实现分开 无名命名空间 命名空间取别名 使用u…...
ES6及以上新特性
ES6(ECMAScript 2015)及以上版本引入了许多新特性,每个版本都有不同的增强和改进。以下是 ES6 及以上版本的新特性的详细描述: ES6(ECMAScript 2015): let 和 const 声明:引入块级作…...
【Python】安装 Python 环境
需要安装的环境主要是两个部分: 运行环境:Python开发环境:PyCharm 一、安装 Python 1、找到官方网站 Welcome to Python.org 2、找到下载页面 选择 "Download for Windows": 现在主流使用的 Python 版本是 Python…...
忍者像素绘卷参数详解:CFG/Steps/画幅三要素调优指南
忍者像素绘卷参数详解:CFG/Steps/画幅三要素调优指南 1. 认识忍者像素绘卷 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站,它将忍者的热血意志与16-Bit复古游戏美学完美融合。这款工具采用明亮的"云端"视觉设计,…...
城通网盘限速破解:ctfileGet让下载效率提升10倍的技术革命
城通网盘限速破解:ctfileGet让下载效率提升10倍的技术革命 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 在数字化协作日益频繁的今天,网盘已成为信息传递的重要枢纽。然而城通…...
别再手动下载了!教你用Python+Schedule库打造个人YouTube视频自动下载工具
Python自动化神器:用Schedule库打造智能视频下载系统 每次手动下载YouTube视频不仅耗时耗力,还容易错过更新。作为Python开发者,我们完全可以用代码解放双手,打造一个全自动的视频下载系统。今天要分享的这套方案,结合…...
丹青识画GPU算力优化部署教程:显存占用降低40%实操
丹青识画GPU算力优化部署教程:显存占用降低40%实操 1. 引言:当艺术邂逅算力,如何优雅地“瘦身”? 想象一下,你刚部署好一个能看懂画作、还能用书法题诗的AI应用——“丹青识画”。它融合了前沿的多模态AI与东方美学&…...
车内人体健康检测:赋能智能座舱健康,构建联网化驾乘健康生态
随着人工智能与物联网技术的快速迭代,汽车正从传统交通工具加速演进为集安全、健康、舒适于一体的智慧移动空间。其中,车内智能人体健康检测作为智能座舱健康体系的核心支撑,依托车内联网健康监测技术,打破传统座舱的功能边界&…...
别再死记硬背了!用eNSP模拟一个500人公司的真实网络(含VLAN、MSTP、VRRP完整配置)
从零构建500人企业网络:eNSP实战中的VLAN、MSTP与VRRP深度解析 当你第一次面对企业级网络规划时,是否曾被各种协议和配置弄得晕头转向?本文将以一个真实的500人企业网络为蓝本,带你用华为eNSP模拟器完成从需求分析到最终实现的完整…...
Apifox供应链投毒攻击--完整解析
🔴 安全应急通告:Apifox 桌面端供应链投毒与高危凭证窃取事件 一、 事件概述 近期监测到 Apifox 公网 SaaS 版桌面客户端遭遇严重的供应链投毒攻击。攻击者通过劫持合法的运行追踪模块,向用户下发具备凭证窃取、动态执行与持久化能力的恶意 J…...
腾讯VersaViT:多模态视觉理解新标杆
腾讯VersaViT:多模态视觉理解新标杆 【免费下载链接】VersaViT 项目地址: https://ai.gitcode.com/tencent_hunyuan/VersaViT 导语:腾讯最新发布的多模态视觉编码器VersaViT,通过创新的多任务协同训练策略,同时强化语言介…...
P1095 守望者的逃离【洛谷算法习题】
P1095 守望者的逃离 网页链接 P1095 守望者的逃离 题目背景 NOIP2007 普及组 T3 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变。 守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上。…...
