TypeScript之接口

news2024/11/18 4:25:42

一、是什么

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

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

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/1150513.html

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

相关文章

python采集电商jd app搜索商品数据(2023-10-30)

一、技术要点: 1、cookie可以从手机app端用charles抓包获取; 2、无需安装nodejs,纯python源码; 3、搜索接口为:functionIdsearch; 4、clientVersion "10.1.4"同时也支持更高的版本; …

[UDS] --- CommunicationControl 0x28

1 0x28功能描述 根据ISO14119-1标准中所述,诊断服务28服务主要用于网络中的报文发送与接受,比如控制应用报文的发送与接收,又或是控制网络管理报文的发送与接收,以便满足一定场景下的应用需求。 2 0x28应用场景 一般而言&#…

刷穿力扣(31~60)

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 31. 下一个排列 排列原理就是 C 中的 next_permutation 函数&#xff0c;生成指定序列的下一个全排列从给定序列的最右端开始&#xff0c;找到第一个满足 nums[i] < nums[i 1] 的元素 nums[i]若找不到这…

pytorch 入门 (五)案例三:乳腺癌识别-VGG16实现

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】乳腺癌识别&#x1f356; 原作者&#xff1a;K同学啊 在本案例中&#xff0c;我将带大家探索一下深…

高压放大器在工作中的应用实例有哪些

高压放大器是一种电子设备&#xff0c;主要用于将输入的低电压信号放大为输出的高电压信号。它在工业、医疗、科研等领域具有广泛的应用。下面将列举一些高压放大器在工作中的应用实例&#xff1a; 1.高压发生器&#xff1a;高压放大器在高压发生器中被广泛使用。这些发生器通常…

Android渲染流程

目录 缓冲区的不同生命周期代表当前缓冲区的状态&#xff1a; 多个源 ViewRootImpl&#xff1a; Android4.0&#xff1a; Android5.0&#xff1a; Android应用程序调用SurfaceFliger将测量&#xff0c;布局&#xff0c;绘制好的Surface借助GPU渲染显示到屏幕上。 一个Acti…

Cannot find namespace ‘NodeJS‘.

最近在使用自定义指令做防抖节流的时候&#xff0c;使用ts定义定时器类型的时候报的错误&#xff0c;记录一下&#xff1a; 解决方法&#xff1a; 在根目录下找到env.d.ts&#xff0c;或者在根目录中新建一个文件&#xff08;global..d.ts&#xff09;在文件中导出NodeJS命名空…

OpenLayers入门,OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上,以加载世界各国边界为例

专栏目录: OpenLayers入门教程汇总目录 前言 本章以加载世界各国边界的TopoJson格式数据为例,讲解如何使用OpenLayers从vue的assets资源路径加载TopoJson文件并解析数据叠加到地图上。 GeoJson介绍 GEOJSON是gis地图中常用的数据格式,制作地图时用于存储各种地理数据,使…

使用 node.js 简单搭建Web服务 使用node简单搭建后端服务 使用node搭建服务

使用 node.js 简单搭建Web服务 使用node简单搭建后端服务 使用node搭建服务 1、初始化项目2、安装 Express.js Web 服务框架3、创建 app.js 主入口文件, 并且实现 GET、POST请求4、启动服务5、请求测试 1、初始化项目 例如项目名为 node-server-demo mkdir node-server-demo进…

sd 模型笔记之 SDXL

C站有个创作者Copax&#xff0c;他创作了许多模型和LoRA&#xff0c;其中有一个SDXL1.0的模型非常受欢迎&#xff0c;叫Copax TimeLessXL。 TimeLess的字面意思是永恒&#xff0c;不过有一首英文歌也是TimeLess&#xff0c;歌词大意是唯爱永恒。 这个SDXL1.0的模型更新到了8…

Azure机器学习 - 使用与Azure集成的Visual Studio Code实战教程

本文介绍如何启动远程连接到 Azure 机器学习计算实例的 Visual Studio Code。 借助 Azure 机器学习资源的强大功能&#xff0c;使用 VS Code 作为集成开发环境 (IDE)。 在VS Code中将计算实例设置为远程 Jupyter Notebook 服务器。 关注TechLead&#xff0c;分享AI全维度知识。…

从历史的探索到RFID固定资产管理的未来

在人类历史上&#xff0c;技术的进步一直是推动社会和工业发展的关键因素。其中&#xff0c;RFID技术的出现是一个重要的里程碑。让我们回顾一下RFID技术的历史&#xff0c;并探讨如何将其应用于固定资产管理&#xff0c;为企业提供更高效、智能的解决方案。 RFID&#xff08;R…

开发一个简单的管理系统,前端选择 Vue 还是 React?

目录 比于React&#xff0c;我更喜欢使用Vue 低代码平台的前端框架采用Vue的优势有哪些&#xff1f; JNPF-Web-Vue3 的技术栈介绍 &#xff08;1&#xff09;Vue3.x &#xff08;2&#xff09;Vue-router4.x &#xff08;4&#xff09;Ant-Design-Vue3.x &#xff08;5&#xf…

安装pip install pointnet2_ops_lib/.

安装这个的时候一直报错 总结原因还是版本不一致的问题&#xff0c;参考的博客https://blog.csdn.net/weixin_45144684/article/details/132525431 最后在这个链接里面https://anaconda.org/nvidia/cuda-toolkit成果安装11.5的粗大tookit就成功了&#xff0c; 最后附上所有包的…

大数据-Storm流式框架(七)---Storm事务

storm 事务 需求 storm 对于保证消息处理&#xff0c;提供了最少一次的处理保证。最常见的问题是如果元组可以被 重发&#xff0c;可以用于计数吗&#xff1f;不会重复计数吗&#xff1f; strom0.7.0 引入了事务性拓扑的概念&#xff0c;可以保证消息仅被严格的处理一次。因此可…

JMeter的使用,傻瓜式学习【上】

目录 前言 1、JMeter元件及基本使用作用域&#xff08;简述&#xff09; 1.1、基本元件 1.2、作用域的原则 1.3、元件执行顺序 2、JMeter三个重要组件 2.1、线程组 案例&#xff1a; 2.2、HTTP请求 2.3、查看结果树 响应体中&#xff0c;中文乱码解决方案&#xff1…

python爬虫—使用xpath方法进行数据解析

1. 背景信息 爬取安居客二手房源信息 URL地址&#xff1a;https://wuhan.anjuke.com/sale/?fromnavigation 2. 代码实现 import requests from lxml import etreeif __name__ __main__:# 1.指定URLurl "https://wuhan.anjuke.com/sale/?fromnavigation"# 2.U…

c语言字符类型及其大小

c语言字符类型及其大小 c语言字符类型及其大小 c语言字符类型及其大小一、整形int类型二、字符型char类型三、浮点型四、类型限定符五、sizeof()函数六、32操作系统字符类型大小比较 一、整形int类型 二、字符型char类型 三、浮点型 四、类型限定符 五、sizeof()函数 sizeof&a…

Python + RobotFramework 测试框架分享二(项目实践)

项目介绍: 本篇文章是Python + RobotFramework测试框架分享的第二篇文章,介绍的是基于RobotFframework+python构建的一个射频自动化测试工具。包含WIFI的射频测试,BT的射频测试以及校准功能的一个工具。 项目背景: RF: 也就是常说的射频,英文:Radio Ffrequency WIFI:…

软测推荐第二期:10本高质量测试书籍

在不断发展的软件开发领域&#xff0c;测试是质量的守护者&#xff0c;确保产品不仅满足功能要求&#xff0c;而且提供无缝的用户体验。随着软件复杂性的增加&#xff0c;对完善的测试方法和见解的需求也随之增加。 上次给大家推荐了五本书&#xff0c;获得了大家的积极反馈&a…