typescript中的interface理解

typescript中的interface理解

1.简单理解interface

interface是一种自定义的类型检测规范

可以通过定义interface来作为对象型参数的类型检测

比如定义一个User类型的检测规范

interface User{
  name:string,
  age:number,
  email?:string//?将email标记为可选属性
}

在使用User进行类型检测的时候

必须传入满足User的对象属性

//比如下面这个函数,返回值必须得符合User的规范
//说明返回的对象必须为{name:"",age:0}或者{name:"",age:0,email:""}这样的类型
function setUser(usename:string,age:number,email?:string):User{
  return { name: username, age, email}
}

输出

console.log(setUser("测试name",age:12))
//{ name: '测试name', age: 12, email: undefined }

2.interface的拓展

可以通过extends来在interface中加入其他interface的规范

interface A{
  nameA:string
}
interface B{
  nameB:string
}
interface C extends A,B{
  nameC:string
}

此时interface c extends a,b{ nameC:string }就相当于

interface C{
  nameA:string,
  nameB:string,
  nameC:string
}

使用C来进行检测时就得按照interface C 的规范

const obj:C = {
  nameA:"这是A",
  nameB:"这是B",
  nameC:"这是C"
}
console.log(obj)
//{ nameA: '这是A', nameB: '这是B', nameC: '这是C' }

3.接口的实现类

用类来实现interface的时候,使用关键字implements来实现

需要把interface作为类最小实现规范,也就是类至少必须要实现interface的内容

类在满足interface的情况下也可以加其他的内容

下面的IUser接口,实现类至少需要实现getName()getAge(),才满足接口的规范

interface IUser{
  getName():string,
  getAge():number
}

定义实现类AdminUser

class AdminUser implements IUser{  
   private name:string
   private age:number
   constructor(adminName:string,adminAge:number){
    this.name=adminName
    this.age=adminAge
   }
   getName():string{//这个方法必须要有,且满足IUser的规范
    return this.name
   }
   getAge(): number {//这个方法必须要有,且满足IUser的规范
     return this.age
   }
   setName(newName:string):void{
    this.name = newName
   }
}

用类创建对象

const admin = new AdminUser("管理员A",12)
admin.setName("管理员newName")
console.log(admin.getName())
// 管理员newName

补充

1.多态:一个类可以实现多个接口,一个接口也可以拓展多个接口的规范

2.索引签名: 只规范接口中属性的类型,不规范属性的名字时候

interface testIndex {
  [key:string]: string; // 属性名为字符串,属性值也为字符串,但是不强制要求具体的属性名
}
const obj:testIndex={
  myKey:"这是我的Key"
}
console.log(obj)
// { myKey: '这是我的Key' }

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

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

相关文章

python opencv的orb特征检测(Oriented FAST and Rotated BRIEF)

官方文档:https://docs.opencv.org/4.10.0/d1/d89/tutorial_py_orb.html SIFT/SURF/ORB对比 https://www.bilibili.com/video/BV1Yw411S7hH?spm_id_from333.788.player.switch&vd_source26bb43d70f463acac2b0cce092be2eaa&p80 ORB代码 import numpy a…

蓝桥杯JAVA刷题--001

文章目录 题目需求2.代码3.总结 题目需求 2.代码 class Solution {public String convertDateToBinary(String date) {if (date null || date.length() ! 10 || date.charAt(4) ! - || date.charAt(7) ! -) {throw new IllegalArgumentException("输入的日期格式不正确&…

WebRTC的线程事件处理

1. 不同平台下处理事件的API: Linux系统下,处理事件的API是epoll或者select;Windows系统下,处理事件的API是WSAEventSelect,完全端口;Mac系统下,kqueue 2. WebRTC下的事件处理类: …

zentao ubuntu上安装

#下载ZenTaoPMS-21.2-zbox_amd64.tar.gz(https://www.zentao.net/downloads.html) https://dl.zentao.net/zentao/21.2/ZenTaoPMS-21.2-zbox_amd64.tar.gzcd /opt tar -zxvf ZenTaoPMS-21.2-zbox_amd64.tar.gz#启动 /opt/zbox/zbox start /opt/zbox/zbox…

LeetCode算法题——有序数组的平方

题目描述 给你一个按非递减顺序排序的整数数组nums,返回每个数字的平方组成的新数组,要求也按非递减顺序排序。 题解 解法一:暴力解法 思路: 该题目可通过暴力解法解决,即利用for循环遍历数组,对数组每…

vue v-for 数据增加页面不刷新

<div style"float:left;border:1px solid red;height:100px;width:600px;"><el-form-item label"多语言配置" style"width:700px;" prop"validTanleHead"><el-input style"width: 180px" placeholder"请…

前端-动画库Lottie 3分钟学会使用

目录 1. Lottie地址 2. 使用html实操 3. 也可以选择其他的语言 1. Lottie地址 LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs.…

汇编环境搭建

学习视频 将MASM所在目录 指定为C盘

Flutter:打包apk,详细图文介绍(一)

困扰了一天&#xff0c;终于能正常打包apk安装了&#xff0c;记录下打包的流程。建议参考我这篇文章时&#xff0c;同时看下官网的构建说明。 官网构建并发布 Android 应用详情 1、AS创建Flutter项目 2、cmd执行命令 生成一个sunluyi.jks的文件&#xff0c;可以自行把sunluyi替…

单个变量a的妙用

一道清华大学复试上机题 问题&#xff1a;为什么只需要定义一个整数变量a&#xff0c;而不是定义一个数组a[]&#xff1f; 回答 在这段代码中&#xff0c;只需要定义一个整数变量 a&#xff0c;而不是一个数组 a[]&#xff0c;是因为程序的逻辑是逐个处理输入的整数并立即输出…

【YOLOv8模型网络结构图理解】

YOLOv8模型网络结构图理解 1 YOLOv8的yaml配置文件2 YOLOv8网络结构2.1 Conv2.2 C3与C2f2.3 SPPF2.4 Upsample2.5 Detect层 1 YOLOv8的yaml配置文件 YOLOv8的配置文件定义了模型的关键参数和结构&#xff0c;包括类别数、模型尺寸、骨干&#xff08;backbone&#xff09;和头部…

手机租赁平台开发助力智能设备租赁新模式

内容概要 手机租赁平台开发&#xff0c;简单说就是让你用得起高大上的智能设备&#xff0c;不管是最新款的手机、平板&#xff0c;还是那些炫酷的智能耳机&#xff0c;这个平台应有尽有。想要体验但又不希望花大钱&#xff1f;那你就找对地方了&#xff01;通过灵活的租赁方案…

「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现

本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构&#xff0c;我们将创建一个动态购物车&#xff0c;支持商品的添加、移除以及实时总价计算。 关键词 UI互动应用接口定义购物车功能动态计算商品管理列表操作 一、功能说明 简易购物车功能包含以下交互&#…

Datawhale AI冬令营(第二期)动手学AI Agent task2--学Prompt工程,优化Agent效果

目录 如何写好Prompt&#xff1f; 工具包神器1&#xff1a;Prompt框架——CO-STAR 框架 工具包神器2&#xff1a;Prompt结构优化 工具包神器3&#xff1a;引入案例 案例&#xff1a;构建虚拟女友小冰 1. 按照 CO-STAR框架 梳理目标 2. 撰写Prompt 3. 制作对话生成应用&…

SpringBoot整合springmvc

文章目录 1.SpringMVC的自动管理1.1中央转发器1.1.1Spring boot配置多个DispatcherServlet 1.2控制器1.2.1找到启动类的位置1.2.1.1SpringApplication.run()1.2.1.2SpringApplication 构造方法1.2.1.3deduceMainApplicationClass() 1.2.2ComponentScan 注解 1.3视图解析器自动管…

常见的排序算法过程和比较分析

比较分析 排序类别排序算法时间复杂度&#xff08;最好&#xff09;时间复杂度&#xff08;最坏&#xff09;时间复杂度&#xff08;平均&#xff09;辅助空间复杂度稳定性插入排序直接插入排序O(n)O(n)O(n)O(1)稳定插入排序折半插入排序O(n)O(n)O(n)O(1)稳定插入排序希尔排序…

[MySQL报错]关于发生net start mysql 服务无法启动,服务没有报告任何错误的五种解决方案。

咋直接进入主题。 我遇到的问题是net start mysql 服务无法启动&#xff0c;服务没有报告任何错误 其问题出在哪里呢 一.ini文件配置问题 在于你没有给你下载好的mysql文件中配置.ini文件。 该如何配置呢。那就是先在文件夹中创建一个文本文件&#xff0c;把下面内容复制进去…

Unity网络通信相关

Socket 通信一张图搞定 谁提供服务谁绑定端口&#xff0c;建立Listener,写Host

小波与傅里叶变换在去噪效果上的对比分析-附Matlab源程序

&#x1f468;‍&#x1f393; 博主简介&#xff1a;博士研究生 &#x1f52c; 超级学长&#xff1a;超级学长实验室&#xff08;提供各种程序开发、实验复现与论文指导&#xff09; &#x1f4e7; 个人邮箱&#xff1a;easy_optics126.com &#x1f56e; 目 录 摘要一、…

如何利用 ClickHouse 实现高级分析:MySQL 到 ClickHouse 实时数据同步指南

在数据驱动的时代&#xff0c;企业必须依靠先进的数据分析能力来提升竞争力。随着数据量的激增和业务需求的复杂化&#xff0c;传统的关系型数据库已经无法满足高效处理和实时分析的需求。ClickHouse 作为一款高性能的列式数据库&#xff0c;凭借其卓越的查询性能和可扩展性&am…