typescript 中的接口及其用途

接口:定义行为动作的规范

属性接口、函数类型接口、可索引接口、类类型接口、

1、属性接口  对JSON的约束

function printLabel(label: string): void {console.log('printLabel');
}
printLabel('字符串')function printLabel2(labelInfo: { label: string }): void {console.log('printLabel2');
}
printLabel2({ name: 'li' }) // 错误写法
printLabel2({ label: 'li' })

对批量方法传入参数进行约束

接口:行为和动作的规范,对批量方法进行约束

interface FullName {firstName: string; // 注意;结束secondName: string;age?: number // 添加问号为可选属性,可传可不传
}function printName(name: FullName) {// 必须传入对象,必须包含firstName,secondName字段并且都是字符串console.log(name.firstName + name.secondName);
}// 传入的对象必须包含 firstName 和 secondName
const obj = {firstName: '1',secondName: '2',c: 1
}
printName(obj)

 封装ajax接口定义

interface Config {type: string,url: string,data?: string,dataType: string
}function ajax(config: Config) {var xhr = new XMLHttpRequest();xhr.open(config.type, config.url, true)xhr.send(config.data)xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {if (config.dataType == 'json') {JSON.parse(xhr.responseText)} else {console.log('成功', xhr.responseText);}}}
}
ajax({type: 'get',data: 'datadatdatatatat',url: 'http://www.baidu.com',dataType: 'json'
})

2、函数接口类型 对方法传入的参数以及返回值进行约束

// 加密的函数类型接口
interface encrypt {(key: string, value: string): string;
}var md5: encrypt = function (key: string, value: string) {// 模拟操作return key + value
}
console.log(md5('name', 'val'));

 3、可索引接口 数组、对象的约束(不常用)

// ts定义数组的方式
var arr1: number[] = [1, 2]
var arr2: Array<string> = ['1', '2']// 可索引接口对数组的约束
interface UseArr {[index: number]: string
}
var arr3: UseArr = ['1', '2']// 可索引接口对对象的约束
interface UseObj {[index: string]: string
}
var obj: UseObj = { name: '20', wof: '50' }

4、类类型接口 对类的约束 和抽象类相似

interface Animal {name: string;eat(str: string): void;
}class Dog implements Animal {public name: string;constructor(name: string) {this.name = name}eat() {console.log(this.name);}
}
var d = new Dog('小黑')
d.eat()class Cat implements Animal {public name: string;constructor(name: string) {this.name = name}eat(food) {console.log(this.name + food);}
}
var c = new Cat('小花')
c.eat('🐟')

5、接口的扩展 接口可以继承接口

interface Animal {eat(): void;
}
interface Person extends Animal {work(): void;
}
class Progromer {constructor(name: string) {this.name = name}coding(code: string) {console.log(this.name + code);}
}class Web extends Progromer implements Person {constructor(name: string) {super(name)}eat() {console.log(this.name + '吃');}work() {console.log(this.name + '工作');}
}
var w = new Web('丧彪')
w.eat()
w.work()
w.coding('ts')

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

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

相关文章

文章分享:《肿瘤DNA甲基化标志物检测及临床应用专家共识(2024版)》

本文摘自于《肿瘤DNA甲基化标志物检测及临床应用专家共识&#xff08;2024版&#xff09;》 目录 1. DNA甲基化标志物概述 2 DNA甲基化标志物的临床检测 2.1 临床样本前处理注意事项 2.2 DNA甲基化标志物检测技术方法 2.2.1 DNA提取与纯化 2.2.2 DNA转化 2.2.3 DNA 甲基…

Oracle 19C 传输表空间之-Windows 至 Linux

1、源端步骤&#xff08;Windows &#xff09;&#xff1a; SQL> col platform_name for a40 SQL> SELECT * FROM V$TRANSPORTABLE_PLATFORM ORDER BY PLATFORM_ID; PLATFORM_ID PLATFORM_NAME ENDIAN_FORMAT CON_ID ----------- -…

翻工第二次 Ant Design Pro 下载,发现问题,电脑网络配置有误,魔法了

一、相关网址链接 鱼皮的用户中心项目 &#xff08;前端Ant Design Pro构建&#xff09; 语雀 ## 没有选择umi版本这一步 Issue #11144 ant-design/ant-design-pro GitHub 关于umi ui图标未显示问题_umi ui不出现-CSDN博客 二、存在问题 导致下载速度慢 本人镜像代码写…

关于emulate

enumerate() 函数用于将一个可遍历的数据对象(如列表、元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中。 enumerate() 函数的主要优势在于简化代码和提高可读性。它解决了在遍历可迭代对象时需要手动跟踪索引的问题。这在需要同时访问元素…

AI实景模型无人自动直播助手.减少商家在短视频线上卖货的成本,开启无人直播新时代!

在互联网时代&#xff0c;直播已经成为信息传播的主流方式&#xff0c;尤其是在年轻人中&#xff0c;直播更是备受追捧。然而&#xff0c;对于许多想要尝试直播的人来说&#xff0c;缺乏合适的主播可能成为一大障碍。那么&#xff0c;面对这一难题&#xff0c;如何实现手机无人…

C++ 常量

常量是指在程序运行过程中&#xff0c;其值不能被改变的量。 如&#xff1a;i255;arearr3.14; 在程序中直接使用数值有两个问题&#xff1a; 可读性差&#xff1b; 可维护差&#xff1b; 一 符号常量 C语言符号常量的顶用形式如下&#xff1a; 二 C99的const常量 C 语言co…

【C++】学习笔记——优先级队列

文章目录 十、优先级队列1. priority_queue的介绍2. 优先级队列如何使小的数据优先级高3. 仿函数介绍4. priority_queue的模拟实现 补&#xff1a; 反向迭代器未完待续 十、优先级队列 1. priority_queue的介绍 优先级队列 其实也不属于队列&#xff0c;它跟 stack 和 queue …

逗号运算符后不能和 return、break、continue 连用

【知识点】 为了简单直观&#xff0c;有的人喜欢将两条语句用逗号运算符隔开&#xff0c;写到一行。这在多数情况下&#xff0c;没有问题。但是&#xff0c;逗号运算符后不能和 return、break、continue 等连用。否则&#xff0c;就会报错&#xff1a;[Error] expected primary…

NSS刷题

1、[SWPUCTF 2021 新生赛]gift_f12 打开题目后查看源码无发现&#xff0c;用f12发现flag 2、[GDOUCTF 2023]hate eat snake 打开链接是一个贪吃蛇小游戏&#xff0c;f12找到js文件中有一个speed的语句&#xff0c;该语句的作用是使速度增加&#xff0c;因此&#xff0c;将该语…

引用数据类型 栈内存 堆内存

let m { a: 10, b: 20 }; let n m; n.a 15; console.log(m.a) // 15 原因&#xff1a;基本数据类型存储在栈内存中&#xff0c;引用数据类型存储在堆内存中 &#xff0c;引用数据类型存储在堆内存中会在栈内存中创建一个指针&#xff0c;栈内存中的这个指针指向堆内存中的地…

SpringCloud生态体系介绍

Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、智能路由、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用Spring Boot的开发风格做到一键启动和部署。 SpringC…

linux上安装Jmeter环境

以前都是在Windows本机上使用界面版Jmeter&#xff0c;今天试一下安装到linux上在linux中使用&#xff0c;Jmeter的使用需要先安装jdk环境然后再配置jmeter。 1.配置环境 linux环境&#xff1a;Centos 8.2 64位 JDK版本&#xff1a;jdk-8u221-linux-x64.tar.gz &#xff08;…

数据中心法

数据中心法是实现词法分析器的结构化方法。通过设计主表和子表分开存储状态转移信息&#xff0c;实现词法分析器的控制逻辑和数据结构分离。 主要解决了状态爆炸、难以维护和复杂性的问题。 状态爆炸是指当状态和转移较多时&#xff0c;单一使用一个表来存储所有的信息的话会导…

通俗的理解网关的概念的用途(二):不同区域的网络之间的访问方式

两个不同区域的网络互相访问&#xff0c;一般可以通过一种叫做“三层”的网络设备来进行通信&#xff1a; 一、网关方式&#xff1a; 本机A(192.168.1.1)访问目标 T10&#xff08;10.10.10.10&#xff09;时&#xff0c;由于根据本地网络的设置&#xff0c;操作系统通过计算得…

UE4BeginPlay执行流程

文章目录 UE4 BeginPlay执行流程源代码UGameInstance::StartPlayInEditorGameInstance:UWorld::BeginPlayAGameModeBase::StartPlayAGameStateBase::HandleBeginPlayAWorldSettings::NotifyBeginPlayAActor::DispatchBeginPlay UE4 BeginPlay执行流程 Created with Raphal 2.3.…

算法第63天 单调栈3

84 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 def largestRectangleArea(heights):res0for i in range(len(heights)):left…

【Linux】如何查看Linux命令的使用方法

man cd | col -b > cdhelp.txt #查询帮助文档 man 命令用于查看 Linux 系统的在线帮助文档&#xff08;man page&#xff09;。man 是 “manual” 的缩写&#xff0c;通过它&#xff0c;你可以访问关于各种命令、函数、配置文件等的详细文档。 cd 是一个常用的命令&#xf…

YOLO数据集制作(一)|Labelme标注的矩形框json文件转txt

以下教程用于将使用Labelme软件标注生成的json格式文件转成YOLO使用的txt格式&#xff0c;适用场景&#xff1a;矩形框 使用方法&#xff1a;将json文件夹路径填到json_dir后&#xff0c; 将保存转化后txt的路径填入txt_dir后&#xff0c;运行即可转化。 运行完成后会生成label…

io流、字节流字符流区别

想象你正在做一道菜&#xff0c;需要准备材料和烹饪步骤。IO流就像是你在做菜时使用的工具&#xff0c;而字节流和字符流则是不同类型的工具&#xff0c;适合不同的操作。 首先&#xff0c;字节流就像是你使用的普通厨具&#xff0c;比如刀、砧板等。它们可以处理任何类型的食…

Linux-解压缩文件命令(gzip、zip、unzip、tar、jar)

目录 1、压缩解压命令 1.1 gzip、gzcat、gunzip 1.2 bzip2、bzcat、bunzip2 1.3 zip和unzip 2、tar命令 3、jar命令 1、压缩解压命令 1.1 gzip、gzcat、gunzip gzip 命令 压缩文件后缀.gz gzcat 用来显示压缩的文本文件内容 gunzip 用来解压文件 把/home目录下的t…