【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: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.mfbz.cn/a/54392.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入理解设计模式之门面模式

深入理解设计模式之门面模式 什么是门面模式? 门面模式(Facade Pattern)是一种结构型设计模式,它提供了一个简单的接口,用于访问复杂子系统中的一组接口。门面模式通过封装子系统的复杂性,提供了一个更简…

华为云hcip核心知识笔记(数据库服务规划)

华为云hcip核心知识笔记(数据库服务规划) 1.云数据接库优势 1.1云数据库优点有: 易用性强:能欧快速部署和运行 高扩展:开放式架构和云计算存储分离 低成本:按需使用,成本更加低廉 2.云数据库r…

Linux下查阅帮助文档必学命令 man

Linux操作系统的使用中,我们经常会遇到很多问题,这个时候查询文档的能力至关重要,黄老师来推荐大家使用man,这时我们必须掌握的查阅能力: 最常用的命令: man 名称 man 数字(1~9) 名称 这里的数字分别代表:

CentOS 搭建 GitLab Git

本文目录 1. CentOS7 搭建 Gitlab1. 安装 sshd1. 安装 sshd 依赖2. 启动并设置开机自启3. 安装防火墙4. 开启防火墙5. 开放 ssh 以及 http 服务 2. 安装 postfix1. 安装 postfix2. 启动并设置开机自启3. 几个补充知识 3. 下载并安装 gitlab1. 在线下载安装包2. 安装 4. 修改 gi…

(学习笔记-内存管理)如何避免预读失效和缓存污染的问题?

传统的LRU算法存在这两个问题: 预读失效 导致的缓存命中率下降缓存污染 导致的缓存命中率下降 Redis的缓存淘汰算法是通过实现LFU算法来避免 [缓存污染] 而导致缓存命中率下降的问题(redis 没有预读机制) Mysql 和 Linux操作系统是通过改进…

node.js的优点

提示:node.js的优点 文章目录 一、什么是node.js二、node.js的特性 一、什么是node.js 提示:什么是node.js? Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于ChromeV8引擎的JavaScript运行环境,使用了一个事件驱…

【云原生】K8S超详细概述

目录 一、Kubernets概述1.1 K8S什么1.2为什么要用K8S 二、Kubernetes 集群架构与组件2.1Master组件Kube-apiserverKube-controller-managerKube-scheduler 2.2 配置存储中心etcd 2.3 Node 组件KubeletKube-Proxydocker 或 rocket 三、 Kubernetes 核心概念3.1Pod3.2Pod 控制器K…

运营商的风控难题该如何破解?

一、运营商难题 01 黑产养卡 这个产业是运营商独有的难题:部分虚拟运营商走线上渠道吸引用户效果不理想,为盲目追求用户数字,便利用线下渠道养卡,即兜售给卡贩子,由此滋生了非实名卡、黑卡等乱象。 “养卡”又称“假…

MATLAB编程实践12、13

生命游戏 游戏的宇宙是无限可扩展的二维矩形网格,群体是那些标注为存活的网格的集合。群体可以依照称为代的离散时间步距进化。在每一步中,每个网格的命运由它周围最近的8个网格邻居的活度决定,规则如下: 如果一个存活的网格有两个…

环形链表 II(JS)

环形链表 II 题目 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,…

单例模式(Singleton)

单例模式保证一个类仅有一个实例,并提供一个全局访问点来访问它,这个类称为单例类。可见,在实现单例模式时,除了保证一个类只能创建一个实例外,还需提供一个全局访问点。 Singleton is a creational design pattern t…

小区智能电动汽车充电桩如何收费盈利?

摘要:智能用电小区是国家电网为了研究智能电网智能用电的先进技术如何运用于居民区,提高人民的生活水平,提高电网智能化水平以及提升用电服务质量而进行的一项尝试。电动汽车作为智能用电小区建设的一个组成部分同样也逐渐被纳入发展规划&…

wireshark导出H264裸流

导出H264裸流 安装wireshark下载rtp_h264_extractor.lua脚本配置lua脚本重启wireshark筛选 安装wireshark 下载抓包工具:首先,您需要下载并安装一个网络抓包工具,例如Wireshark(https://www.wireshark.org)或tcpdump&…

26 用lsqnonlin求解最小二乘问题(matlab程序)

1.简述 函数语法 x lsqnonlin(fun,x0) 函数用于: 解决非线性最小二乘(非线性数据拟合)问题 解决非线性最小二乘曲线拟合问题的形式 变量x的约束上下限为ub和lb, x lsqnonlin(fun,x0)从x0点开始,找到fun中描述的函数的最小平方和。函数fu…

Linux操作系统(一):详解CPU

学习操作系统往往需要先学习CPU相关知识,然后再学习操作系统的结构,主要是因为操作系统是运行在 CPU 上的核心软件,它通过与 CPU 的交互来管理计算机的硬件资源,执行各种系统服务,并为用户和应用程序提供接口和功能。 …

心理测量平台目录遍历

你知道,幸福不仅仅是吃饱穿暖,而是勇敢的战胜困难。 漏洞描述 心理测量平台存在目录遍历漏洞,攻击者可利用该漏洞获取敏感信息。 漏洞复现 访问目录遍历漏洞路径: /admin/漏洞证明: 文笔生疏,措辞浅薄…

Prometheus中的关键设计

1、标准先行,注重生态 Prometheus 最重要的规范就是指标命名方式,数据格式简单易读。比如,对于应用层面的监控,可以要求必须具备这几个信息。 指标名称 metric Prometheus 内置建立的规范就是叫 metric(即 __name__…

clickhouse查询缓存

为了实现最佳性能,数据库需要优化其内部数据存储和处理管道的每一步。但是数据库执行的最好的工作是根本没有完成的工作!缓存是一种特别流行的技术,它通过存储早期计算的结果或远程数据来避免不必要的工作,而访问这些数据的成本往…

Redis以及Java使用Redis

一、Redis的安装 Redis是一个基于内存的 key-value 结构数据库。 基于内存存储,读写性能高 适合存储热点数据(热点商品、资讯、新闻) 企业应用广泛 官网:https://redis.io 中文网:https://www.redis.net.cn/ Redis…

微信小程序监测版本更新

在index.js里面 不放到app.js里面是因为有登录页面,在登录页面显示更新不太友好 onShow() {const updateManager wx.getUpdateManager()// 请求完新版本信息的回调updateManager.onCheckForUpdate(res > {if (res.hasUpdate) {// 新版本下载成功updateManage…
最新文章