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

news2024/9/26 3:32:55

导语
什么是 类型接口

在面向对象语言中,接口(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:number
    name: string;
    age: number;
    gender?: string;
    select?: boolean;
    [ArbitraryvalName: string]: string | number | boolean    //联合类型
}

let user: IPerson = {
    id:123
    name: '张三',
    age: 25,
};

user.id = 456

在这里插入图片描述

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


接口的继承

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

interface IgoodsType {
    id: number
    name: 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中,所必要掌握的知识点。


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/805490.html

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

相关文章

基于IP地址的证书实现https

基于IP地址实现传递数据的,默认的HTTP很容易被不法分子劫持数据,网络防洪是当下的互联网为确保安全,要用HTTPS协议更为妥当。 使用IP地址申请证书的主要条件,必须在申请认证过程,开放IP地址外网可以访问,包…

web漏洞-java安全(41)

这个重点是讲关于java的代码审计,看这些漏洞是怎么在java代码里面产生的。 #Javaweb 代码分析-目录遍历安全问题 这个漏洞原因前面文章有,这次我们看看这个漏洞如何在代码中产生的,打开靶场 解题思路就是通过文件上传,上传文件…

文件按关键字分组-切割-染色-写入excel

1. 背景 针对下面的文件data.csv,首先根据fid进行排序,然后分组,使相同fid的记录放到同一个excel文件中,并对每列重复的数据元素染上红色。 fid,user_id -1000078398032092029,230410010036537520 -1000078398032092029,23042301…

聊聊嵌入式编程中的主函数和循环函数

a在嵌入式编程中,主函数(main函数)是程序的入口点,也是程序的起点。在主函数中,我们可以进行一些初始化操作和设置,然后进入一个主循环,执行特定的任务或处理。 主函数在程序开始时被调用&…

链路模型的分析

链路模型 目录概述需求: 设计思路实现思路分析1.解说 拓展实现性能参数测试: 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait …

计算机组成原理(2)- 浮点数的存储

1、浮点数的表示方法 假设有以下小数,它表示的十进制数是多少呢? 00000000 00000000 00000000 1010.10101*2^3 1*2^1 1*2^-1 1*2^-3 10.625 1010.1010可以用科学计数法来表示为1.0101010 * 2^3。关于科学计数法再举个例子0.10101用科学计数法表示…

如何以管理员权限安装某个msi

介绍 如何以管理员权限安装某个msi 方法 要以管理员权限在控制台中安装一个 MSI 文件,你可以按照以下步骤操作: 打开命令提示符(或 PowerShell):按下 Win R 键,在运行窗口中输入 “cmd”(或 …

Redis 笔记,基本数据类型、持久化、主从、集群等等问题

标题 😀😀😀创作不易,各位看官点赞收藏. 文章目录 标题Redis 基础笔记1、安装及环境搭建2、Redis 数据类型2.1、String2.2、List2.3、Hash2.4、Set2.5、Zset2.6、BitMap2.7、HyperLogLog2.8、Geospatial2.9、Stream 3、Redis 持久…

数据结构--算法的时间复杂度和空间复杂度

文章目录 算法效率时间复杂度时间复杂度的概念大O的渐进表示法计算实例 时间复杂度实例 常见复杂度对比例题 算法效率 算法效率是指算法在计算机上运行时所消耗的时间和资源。这是衡量算法执行速度和资源利用情况的重要指标。 例子: long long Fib(int N) {if(N …

如何建立Docker私有仓库?

文章目录 docker私有仓库harborHarbor仓库部署Harbor仓库使用 docker私有仓库 Docker 私有仓库是一个用于存储和管理 Docker 镜像的私有存储库。它允许你在内部网络中创建和管理 Docker 镜像,并提供了更好的安全性和控制,因为你可以完全控制谁能够访问和…

el-table 设置行背景颜色 鼠标移入高亮问题处理

一、 设置行背景颜色 1. 需求描述 后端返回表格数据,有特定行数需要用颜色标识。类似于以下需求: 2. 解决方式 方式区别:row-class-name“tableRowClassName”已返回类名的形式设置样式,代码整洁,但是会鼠标高亮&#xff0c…

【IDEA】idea不自动生成target

文章目录 1. 不生成target2. 仅部分文件不生成target2.1. 一般原因就是资源没有设置2.2. 配置编译src/main/java文件夹下的资源文件2.3. 清理缓存(王炸) 3. 参考资料 本文描述idea不生成target的几种情况以及处理方法 1. 不生成target 像下图这样根本就…

JavaSwing+MySQL的在线考试系统

点击以下链接获取源码: https://download.csdn.net/download/qq_64505944/88114390?spm1001.2014.3001.5503 JDK1.8 MySQL5.7 功能:开始做题,上一题,下一题,提交,每题都有时间限制

【SpringⅢ】Spring 的生命周期

目录 🥪1 Bean 的作用域 🥩1.1 singleton:单例模式 🍙1.2 prototype:原型模式 🍱1.3 Bean 的其他作用域 🍜2 Spring 生命周期(执行流程) 🥘2.1 启动容器 🍲 2.2 读…

【代理模式】了解篇:静态代理 动态代理~

目录 1、什么是代理模式? 2、静态代理 3、动态代理 3.1 JDK动态代理类 3.2 CGLIB动态代理类 4、JDK动态代理和CGLIB动态代理的区别? 1、什么是代理模式? 定义: 代理模式就是为其他对象提供一种代理以控制这个对象的访问。在某…

图像 检测 - FCOS: Fully Convolutional One-Stage Object Detection (ICCV 2019)

FCOS: Fully Convolutional One-Stage Object Detection - 全卷积一阶段目标检测(ICCV 2019) 摘要1. 引言2. 相关工作3. 我们的方法3.1 全卷积一阶目标检测器3.2 FCOS的FPN多级预测3.3 FCOS中心度 4. 实验4.1 消融研究4.1.1 FPN多级预测4.1.2 有无中心度…

python学习时与chatgpt4对话的一些感悟

今天学SCENIC教程,看到里面有一句不是很懂 If you run this from a python script instead of a Jupyter notebook, please enclose the code in a if __name__ __main__: construct. 现在把和chatgpt4问答的内容发上来,确实是很厉害 没有太看懂&…

Verilog语法学习——LV6_多功能数据处理器

LV6_多功能数据处理器 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 描述 根据指示信号select的不同,对输入信号a,b实现不同的运算。输入信号a…

蓝海卓越计费管理系统存在弱口令

连伟人的一生都充满了那么大的艰辛,一个平凡的人吃点苦又算得了什么呢? 漏洞描述 蓝海卓越计费管理系统存在弱口令漏洞 漏洞复现 访问漏洞url: 输入默认的账号密码:admin/admin 登录成功 文笔生疏,措辞浅薄&#…

小米手机MIUI优化的影响

1. 小/红米手机的MIUI优化选项 2. MIUI优化选项的影响 2.1 MIUI优化会影响应用信息展示 MIUI优化选项会影响到应用信息的内容展示,具体如下图所示: 如果我们需要在应用信息里展示自启动入口,那我们就需要开启MIUI优化。 2.2 MIUI优化会影…