TypeScript 中接口类型【Interfaces】的定义使用解读

news2024/11/19 0:52:15

导语
什么是 类型接口

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

在这里插入图片描述

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


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

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

Interfaces 定义对象类型:

interface Person {
    name: string;
    age: number;
    gender: string;
    callback: (a: number) => number   //此处定义约束了一个 函数方法
}

let user: Person = {
    name: '张三',
    age: 25,
    gender: "男",
    callback(a: number) {  //定义函数方法
        console.log("这是一个函数");
        return 123 * 10
    },
};

//调用函数
console.log(user.callback(456));  //1230

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

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


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

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

interface Person {
    name: string;
    age: number;
    gender?:string;
}

let user: Person = {
    name: '张三',
    age: 25,
};

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


任意属性

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

interface Person {
    name: string;
    age: number;
    gender?: string;
    [hobby: string]: any
}

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

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

注意:

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

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

interface Person {
    name: string;
    age: number;
    gender?: string;
    select?: boolean;
    [ArbitraryvalName: string]: string | number | boolean    //联合类型
}

let user: Person = {
    name: '张三',
    age: 25,
};

只读属性:

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

```typescript
interface Person {
    readonly id:number
    name: string;
    age: number;
    gender?: string;
    select?: boolean;
    [ArbitraryvalName: string]: string | number | boolean    //联合类型
}

let user: Person = {
    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 arraytype {
    [index: number]: number   //定义任意属性,index 代表数组中的下标。属性值,约束了数组中的数据类型。以及返回值
}
let arr: arraytype = [1, 2, 3, 4, 5]  //关联数组类型

Interfaces 定义函数(function)类型:

interface funtype {  //约束好函数的 规则
//(参数:类型,...):返回值
    (num: number, digit: number): number
}

let fn: funtype = (a: number, b: number) => {  //关联函数类型
    return a + b
}
let c = fn(15, 20);
console.log(c);   //35

本章节,主要梳理了 TypeScript 中 对接口类型【Interfaces】 的使用方式解读。


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

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

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

相关文章

从“裸辞”到“终于找到理想工作”,面试了37家公司,经过5个月的时间终于如愿以偿。

软件测试行业裸辞5个月,面试了37家公司,终于找到理想工作了... 在软件测试行业里工作已经有7年的时间了。然而,在今年初,我因为一些原因选择了离开原来的公司,成为了一名“裸辞族”。我并不后悔这个决定,因…

QT Creator上位机学习(一)基本类别及主体框架解析

系列文章目录 文章目录 系列文章目录前言基础认识多种项目3种基类文件管理编译 项目程序项目管理文件UI文件信号与槽主程序窗体头文件窗体源文件 前言 之前也学习制作过串口上位机和利用Qchart完成数据的曲线显示等等,但大多只是对网上的程序进行拼接,这…

15.RocketMQ中的负载均衡

1.3负载均衡 1.3.1什么是负载均衡 负载均衡(Load Balance)是一种技术解决方案。用来在多个资源(一般是服务器)中分配负载,达到最优化资源使用,避免单台服务器过载。 RocketMQ中的负载均衡主要可以分为生产者发送消息的负载均衡和消费者订阅消息的负载均衡…

记一次phpMyAdmin弱口令爆破事件应急响应

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 事件背景介绍02 流量分析过程03 事件分析结果04 安全加固建议 01 事件背景介绍 某内部应急演练中,安全部门在安全设备上观察到大量phpMyAdmin登录请求,现需根据流量情况进行…

leetcode887. 鸡蛋掉落(动态规划-java)

鸡蛋掉落 leetcode887. 鸡蛋掉落题目描述暴力递归 二分查找代码演示 动态规划代码演示 动态规划专题 leetcode887. 鸡蛋掉落 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/super-egg-drop 题目描述 给你 k 枚相同的鸡…

Python实现所有英雄皮肤图片采集,超高清

目录标题 前言环境使用:模块使用:代码基本四个步骤:代码展示尾语 前言 嗨喽~大家好呀,这里是魔王呐 ❤ ~! 环境使用: Python 3.8 Pycharm 模块使用: requests —> 数据请求模块 需要安装 re 正则表达式 内置模块 不需要安装 os 文件操作模块 内置模块 不需…

记一次Weblogic控制台弱口令爆破事件应急响应

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 事件背景介绍02 流量分析过程03 事件分析结果04 安全加固建议 01 事件背景介绍 某内部应急演练中,安全部门在安全设备上观察到大量Weblogic控制台登录请求,现需根据流量情况…

Rancher集群搭建

前言 随着容器的普及和Kubernetes 的日渐成熟,企业内部运行多个Kubernetes 集群已变得颇为常见,然而部署kubernetes集群的方式也多样化,二进制部署、rancher、kubeadm、minikube等。然而本篇文章主要讲解的是如何使用rancher快速部署一个k8s集…

Linux:LAMP搭建(全源码包安装)

LAMP 就是 Linux Apache Mysql PHP/Python 目录 Linux安装 Apache安装 Mysql安装 安装PHP 安装PHP扩展包 编译安装PHP PHP 添加优化模块 测试网页协同工作 Linux安装 虚拟机安装 (1条消息) VMware:安装centos7_鲍海超-GNUBHCkalitarro的博客-CSD…

从0到1精通自动化测试,pytest自动化测试框架,doctest测试框架(十四)

一、前言 doctest从字面意思上看,那就是文档测试。doctest是python里面自带的一个模块,它实际上是单元测试的一种。 官方解释:doctest 模块会搜索那些看起来像交互式会话的 Python 代码片段,然后尝试执行并验证结果 doctest测试…

iostat命令详解

语法&#xff1a; iostat [ 选项 ] [<时间间隔> <次数> ] 支持的参数及参数详解&#xff1a; -c&#xff1a;仅显示CPU统计信息&#xff0c;与-d选项互斥 -d&#xff1a;仅显示磁盘统计信息&#xff0c;与-c选项互斥 -h&#xff1a;使用NFS&#x…

Prophet算法框架预测输出及使用方法

Prophet 时间序列预测框架入门实践笔记 接续上文&#xff0c;预测结果&#xff1a; forecast m.predict(future) forecast[[ds, yhat, yhat_lower, yhat_upper]].tail(48)forecast 是Pandas的DataFrame&#xff0c;数据项及含义如下&#xff1a; ‘ds’&#xff1a; 是日期时…

内容变现有了VVIP会员门槛,微博这么做图个啥?

文 | 螳螂观察 作者 | 易不二 充分竞争的存量时代&#xff0c;用户是最宝贵的平台资产。 这不仅体现在今年618期间&#xff0c;各大电商平台的“抢人大战”&#xff0c;更具体的风向还在于&#xff0c;作为移动互联网时代最有影响力的社交媒体之一&#xff0c;微博调整了新的…

网络安全——数据链路层安全协议

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.数据链路层安全协议简介 1.数据链路安全性 二.局域网数据链路层协议 1…

2023年亚马逊云科技中国峰会记录

前言 有幸抽到了亚马逊云科技中国峰会的门票&#xff0c;恰好又是在上海举行的&#xff0c;并且看预告有很多热点内容&#xff0c;所以就参加了。 27日一早就赶到了世博中心&#xff0c;此时已经排起了长队。 看来与会者还是蛮多的。 整体分为以下几个环节&#xff1a; 一.上…

津津乐道设计模式 - 外观模式详解(简化女友使用你的支付账户购物的支付体验)

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

spark外置external shuffle service使用介绍

shuffle是什么 shuffle是Hadoop大数据计算中&#xff0c;一个必不可少的环节&#xff0c;通过shuffle可以将不同节点上的同类数据给移动到一起&#xff0c;这在分组&#xff0c;排序&#xff0c;聚合的场景中非常常见&#xff0c;简单图示如下&#xff1a; MapReduce数据处理模…

Vue.js中的状态管理:理解和使用Vuex

目录 前言 Vue.js 样式绑定 Vue.js class class 属性绑定 实例 1 实例 2 实例 3 实例 4 数组语法 实例 5 实例 6 Vue.js style(内联样式) 实例 7 实例 8 实例 9 Vue.js 组件 全局组件 全局组件实例 局部组件 局部组件实例 Prop Prop 实例 动态 Prop Pro…

echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能,解决dblclick事件失效问题,解决地图下钻后边框不更新保留问题

目录 先看实现效果&#xff1a;​编辑 步骤一 安装echarts和echarts-gl 步骤二 设置地图容器 在methods中设置初始化地图方法并在mounted中调用 在methods中设置初始化地图方法 在mounted中调用 打开页面效果&#xff1a;​编辑 步骤三 1、给地图添加双击事件dblcli…

Linux安装后门监测工具chkrootkit

官网&#xff1a;chkrootkit -- locally checks for signs of a rootkit locally checks for signs of a rootkit Chkrootkit is named Top 10 Tools to Scan Linux Servers for Vulnerability and Malware by Cyber Security News. Debian安装 sudo apt install chkrootkit#…