TypeScript深度剖析:TypeScript 中接口的理解?应用场景?

news2025/1/16 17:45:17

面试官:说说你对 TypeScript 中接口的理解?应用场景?

一、是什么

接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法

简单来讲,一个接口所描述的是一个对象相关的属性和方法,但并不提供具体创建此对象实例的方法

typescript的核心功能之一就是对类型做检测,虽然这种检测方式是“鸭式辨型法”,而接口的作用就是为为这些类型命名和为你的代码或第三方代码定义一个约定

二、使用方式

接口定义如下:

interface interface_name {
}

例如有一个函数,这个函数接受一个 User 对象,然后返回这个 User 对象的 name 属性:

const getUserName = (user) => user.name

可以看到,参数需要有一个username属性,可以通过接口描述user参数的结构

interface User {
    name: string
    age: number
}

const getUserName = (user: User) => user.name

这些属性并不一定全部实现,上述传入的对象必须拥有nameage属性,否则typescript在编译阶段会报错,如下图:

如果不想要age属性的话,这时候可以采用可选属性,如下表示:

interface User {
    name: string
    age?: number
}

这时候age属性则可以是number类型或者undefined类型

有些时候,我们想要一个属性变成只读属性,在typescript只需要使用readonly声明,如下:

interface User {
    name: string
    age?: number
    readonly isMale: boolean
}

当我们修改属性的时候,就会出现警告,如下所示:

这是属性中有一个函数,可以如下表示:

interface User {
    name: string
    age?: number
    readonly isMale: boolean
    say: (words: string) => string
}

如果传递的对象不仅仅是上述的属性,这时候可以使用:

  • 类型推断
interface User {
    name: string
    age: number
}

const getUserName = (user: User) => user.name
getUserName({color: 'yellow'} as User)
  • 给接口添加字符串索引签名
interface User {
    name: string
    age: number
    [propName: string]: any;
}

接口还能实现继承,如下图:

也可以继承多个,父类通过逗号隔开,如下:

interface Father {
    color: String
}

interface Mother {
    height: Number
}

interface Son extends Father,Mother{
    name: string
    age: Number
}

三、应用场景

例如在javascript中定义一个函数,用来获取用户的姓名和年龄:

const getUserInfo = function(user) {
    // ...
    return name: ${user.name}, age: ${user.age}
}

如果多人开发的都需要用到这个函数的时候,如果没有注释,则可能出现各种运行时的错误,这时候就可以使用接口定义参数变量:

// 先定义一个接口
interface IUser {
  name: string;
  age: number;
}

const getUserInfo = (user: IUser): string => {
  return `name: ${user.name}, age: ${user.age}`;
};

// 正确的调用
getUserInfo({name: "koala", age: 18});

包括后面讲到类的时候也会应用到接口

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

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

相关文章

图像识别-人脸识别与疲劳检测 - python opencv 计算机竞赛

文章目录 0 前言1 课题背景2 Dlib人脸识别2.1 简介2.2 Dlib优点2.3 相关代码2.4 人脸数据库2.5 人脸录入加识别效果 3 疲劳检测算法3.1 眼睛检测算法3.3 点头检测算法 4 PyQt54.1 简介4.2相关界面代码 5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是…

VRRP基础

1.VRRP概述 VRRP( Virtual Router Redundancy Protocol,虚拟路由器冗余协议)既能够实现网关的备份,又能解决多个网关之间互相冲突的问题,从而提高网络可靠性。 通过把几台路由设备联合组成一台虚拟的“路由设备”&…

nodejs+vue 学生宿舍管理系统设计与实现

可将教师信息、宿管信息、学生信息、楼栋信息等输入到系统中。只有管理员才能录入相关的资料,按照提示,输入相应的资料,而“导入”则可以通过上传档案,导入成功后,相应的寝室就会相应的减少。在录入大楼的时候&#xf…

Unity之ShaderGraph如何实现积雪效果

前言 我们在一些特殊场景,比如冰雪天,经常会对周围物体添加一些积雪效果,如果我们直接把积雪做到模型上,就无法更加灵活的表现其他天气的环境了,比如春夏秋冬切换。所以一般这种需求我们都是使用Shader来表现。 入下图…

Ubuntu提示 “unable to find the VMX binary ‘D:\VM17\vmware-vmx.exe‘“

参考:完美解决Unable to find the VMX binary ‘C:\Program Files (x86)\VMware\VMware Workstation\vmware-vmx.exe‘. 1.搜索添加或删除程序,找到VM,点击更改 2.点击修复,等待修复完成就可以了

【大数据实训】基于赶集网租房信息的数据分析与可视化(七)

温馨提示:文末有 CSDN 平台官方提供的博主 的联系方式,有偿帮忙部署 基于赶集网租房信息的数据分析与可视化 一、实验环境 (1)Linux: Ubuntu 16.04 (2)Python: 3.6 (3)…

【算法训练-回溯算法 二】【子集组合问题】子集、组合、子集II、组合总和

废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【回溯算法】,使用【数组】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为&…

【APP源码】基于Typecho博客程序开发的博客社区资讯APP源码

全新博客社区资讯APP源码 Typecho后端 一款功能全面,用户交互良好,数据本地缓存,集成邮箱验证,在线投稿,(内置Mardown编辑器), 快捷评论的的博客资讯APP。同时兼容H5和微信小程序。 …

基于nodejs+vue学生论坛设计与实现

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

python二次开发CATIA:CATIA Automation

CATIA 软件中有一套逻辑与关系都十分严谨的自动化对象,它们从CATIA(Application)向下分支。每个自动化对象(Automation Object,以下简称Object)都有各自的属性与方法。我们通过程序语言调用这些 Object 的属性与方法,便…

spring 资源操作:Resources

文章目录 Spring Resources概述Resource接口Resource的实现类UrlResource访问网络资源ClassPathResource 访问类路径下资源FileSystemResource 访问文件系统资源ServletContextResourceInputStreamResourceByteArrayResource Resource类图ResourceLoader 接口ResourceLoader 概…

【数之道 08】走进“卷积神经网络“,了解图像识别背后的原理

卷积神经网络 CNN模型的架构Cnn 的流程第一步 提取图片特征提取特征的计算规则 第二步 最大池化第三步 扁平化处理第四步 数据条录入全连接隐藏层 b站视频 CNN模型的架构 图片由像素点组成,最终成像效果由背后像素的颜色数值所决定的 有这样的一个66的区域&#x…

数字货币和区块链:跨境电商的未来之革命

随着全球数字化浪潮的不断涌现,跨境电商正经历着前所未有的革命。其中,数字货币和区块链技术被认为是这场革命的关键驱动力。 它们不仅改变了支付方式,还提供了更安全、高效的交易体验,同时也为跨境电商开启了新的商业模式和机会…

nodejs基于vue 学生论坛设计与实现

随着网络技术的不断成熟,带动了学生论坛,它彻底改变了过去传统的管理方式,不仅使服务管理难度变低了,还提升了管理的灵活性。 是本系统的开发平台 系统中管理员主要是为了安全有效地存储和管理各类信息, 这种个性化的平…

static关键字总结-C/C++

引言&#xff1a;由于怕忘记static的一些区别&#xff0c;今天来写一篇文章尽可能的覆盖到static在C/C中的用法和易错点。 第一部分 C中的static 1. static修饰变量 被修饰的变量只能被定义一次&#xff0c;如下代码&#xff0c;n经过循环后仍然还是10。 #include <stdio…

springMVC中统一异常处理@ControllerAdvice

1.在DispatcherServlet中初始化HandlerExceptionResolver 2.controller执行完成后执行processDispatchResult(processedRequest,response,mappedHandler,mv,dispatchException),有异常则处理异常 3.ExcepitonHandlerExceptionResolver中执行方法doResolveHandlerMethodExceptio…

数据结构复盘——第八章:排序

文章目录 第一部分&#xff1a;各种排序方法的比较第二部分&#xff1a;插入排序1、直接插入排序2、折半插入排序3、希尔排序 第三部分&#xff1a;交换排序1、冒泡排序2、快速排序 第四部分&#xff1a;选择排序1、简单选择排序2、堆排序2.1 堆的概念2.2 堆的调整算法2.3 堆的…

计算机网络-计算机网络体系结构-网络层

目录 一、IPV4 IP数据报格式 *IP 数据报分片 *IPV4地址 分类 网络地址转换(NAT) 二、子网划分与子网掩码 *CIDR *超网 协议 ARP协议 DHCP协议 ICMP协议 三、IPV6 格式 IPV4和IPV6区别 地址表示形式 四、路由选择协议 RIP(路由信息协议) OPSF(开发最短路径优…

为什么高精度机器人普遍使用谐波减速器而不是普通减速器?

机器人作为一种能够代替人类完成各种工作的智能设备&#xff0c;已经广泛应用于工业生产、医疗卫生、军事防卫等领域。其中&#xff0c;机器人的关节传动系统是机器人运动的核心&#xff0c;而减速器作为关节传动系统中的重要组成部分部分&#xff0c;对机器人的性能和技术水平…

volatile-两大特性(可见性、有序性)、内存屏障

6.1 被volatile修饰的变量有两大特点 ● 特点&#xff1a;○ 可见性○ 有序性&#xff1a;有排序要求&#xff0c;有时需要禁重排● 内存语义&#xff1a;○ 当写一个volatile变量时&#xff0c;JMM会把该线程对应的本地内存中的共享变量值立即刷新回主内存中○ 当读一个vola…