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

news2024/11/17 2:50:17

一、是什么

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

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

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

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

相关文章

PHP自定义文件缓存实现

文件缓存:可以将PHP脚本的执行结果缓存到文件中。当一个PHP脚本被请求时,先查看是否存在缓存文件,如果存在且未过期,则直接读取缓存文件内容返回给客户端,而无需执行脚本 1、文件缓存写法一,每个文件缓存一…

优化改进YOLOv5算法:加入SPD-Conv模块,让小目标无处遁形——(超详细)

1 SPD-Conv模块 论文:https://arxiv.org/pdf/2208.03641v1.pdf 摘要:卷积神经网络(CNNs)在计算即使觉任务中如图像分类和目标检测等取得了显著的成功。然而,当图像分辨率较低或物体较小时,它们的性能会灾难性下降。这是由于现有CNN常见的设计体系结构中有缺陷,即使用卷积…

对PySide6 say Hello(包含环境配置) ——PyQt

前言 一直想学一下python,特别是十一前抢票时达到顶峰。我正好是Qter,所以在网上找了一个教程直接学PyQt。 配置PyQt环境 当前环境 Win10Qt5.15.2 python3.11 之前安装python时好像自动安装了python的包管理工具pip,配置pyqt环境所需要安装…

css:transform实现平移、旋转、缩放、倾斜元素

目录 文档语法示例旋转元素 transform-rotate旋转过渡旋转动画 参考文章 文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform 语法 /* Keyword values */ transform: none;/* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: translate…

c/c++程序的内存开辟时 的内存情况

我们写的代码都是要存放在内存空间中的,我们经常说堆区,静态区,还有栈区,相信很多人不是很明白,在今天这篇博客中让大家对它们有一个粗略的认识 1.栈区(static) 在执行函数时,函数内…

H5web微信刮一刮效果

H5web微信刮一刮效果 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>千万别来南宁</title> <meta name"apple-touch-fullscreen" content"yes" /> <meta name"format-detec…

初识Java 16-2 字符串

目录 正则表达式 简单的介绍 正则表达式的创建 量词 Pattern和Matcher 1. find() 2. 分组 3. start()和end() 4. compile()中的标记 5. split() 6. 替换操作 reset() 正则表达式和Java的I/O 本笔记参考自&#xff1a; 《On Java 中文版》 正则表达式 正则表达式是…

【深入浅出汇编语言】寄存器精讲第二期

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、算法模板、汇编语言 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️物理地址二. ⛳️16位结构的CPU三. ⛳️8086CPU给出物理地址的方…

你被骗了吗?别拿低价诱骗机器视觉小白,4000元机器视觉系统怎么来的?机器视觉工程师自己组装一个2000元不到,还带深度学习

淘宝闲鱼&#xff0c;大家搜搜铺价格&#xff0c;特别是机器视觉小白。 机架&#xff1a;&#xff08;新的&#xff09;200元以下。(看需求&#xff0c;自己简单打光&#xff0c;买个50元的。如果复杂&#xff0c;就拿给供应商免费打光) 相机&#xff0c;镜头&#xff1a;&am…

有效的数独

题目链接 有效的数独 题目描述 注意点 board.length 9board[i].length 9board[i][j] 是一位数字&#xff08;1-9&#xff09;或者 ‘.’ 解答思路 首先判断行是否满足数独条件&#xff0c;再判断列是否满足数独条件&#xff0c;最后再判断划分的3x3方格是否满足数独条件…

2.数据结构-链表

概述 目标 链表的存储结构和特点链表的几种分类及各自的存储结构链表和数组的差异刷题(反转链表) 概念及存储结构 先来看一下动态数组 ArrayList 存在哪些弊端 插入&#xff0c;删除时间复杂度高需要一块连续的存储空间&#xff0c;对内存要求比较高&#xff0c;比如要申请…

SSM培训报名管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 培训报名管理系统是一套完善的信息系统&#xff0c;结合SSM框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主 要采用B/S模式开…

vim

简介 vim是一款多模式的文本编辑器&#xff0c;vim里面还有很多子命令&#xff0c;来进行代码的编写操作 常用模式图 命令模式 光标移动 shif $ 光标定义到当前行的最右侧结尾 shift ^ 光标定义到当前行的最左侧开头 shift g 光标定位到文本最末尾…

激光雷达点云基础-点云滤波算法与NDT匹配算法

激光雷达点云处理在五年前就做了较多的工作&#xff0c;最近有一些新的接触发现激光雷达代码原理五年前未见重大更新&#xff0c;或许C与激光雷达结合本身就是比较高的技术门槛。深度学习调包侠在硬核激光雷达技术面前可以说是完全的自愧不如啊。 1、点云滤波 在获取点云数据…

利用远程IO模块,轻松驾驭食品包装生产的自动化

常见的自动化包装系统&#xff0c;它的核心部分通常由一系列高端设备组成&#xff0c;包括自动开箱机、自动封箱机、自动捆扎机、装箱机器人、码垛机器人等。这些设备协同工作&#xff0c;形成一条高效运转的生产线&#xff0c;从开箱到装箱&#xff0c;再到码垛&#xff0c;每…

SpringCloud(二) Eureka注册中心的使用

在SpringCloud(一)中,我们学会了使用RestTemplate进行远程调用,但是在调用user-service时候需要在order-service中发送http请求,请求中需要书写对应微服务的ip和端口号,十分不方便,如果此时有多个user-service实例的话,就不知道调用哪个了(除非每次调用的时候都对ip和端口号进行…

SpringCloud 微服务全栈体系(九)

第九章 Docker 三、Dockerfile 自定义镜像 常见的镜像在 DockerHub 就能找到&#xff0c;但是我们自己写的项目就必须自己构建镜像了。 而要自定义镜像&#xff0c;就必须先了解镜像的结构才行。 1. 镜像结构 镜像是将应用程序及其需要的系统函数库、环境、配置、依赖打包而…

uniapp保存网络图片

先执行下载uni.downloadFile接口&#xff0c;再执行保存图片uni.saveImageToPhotosAlbum接口。 // 保存二维码 saveQrcode() {var _this this;uni.downloadFile({url: _this.qrcodeUrl, //二维码网络图片的地址success(res) {console.log(res);uni.saveImageToPhotosAlbum({fi…

MQTT 保留消息

一、保留消息简介 官方文档&#xff1a;https://www.emqx.io/docs/zh/v5.1/messaging/mqtt-retained-message.html 1、为什么需要保留消息 不考虑持久会话的因素&#xff0c;MQTT订阅只有在客户端连接之后才能创建主题。所以当消息到达服务端之后&#xff0c;服务端只会把消息…

Pycharm安装jupyter和d2l

安装 jupyter: jupyter是d2l的依赖库&#xff0c;没有它就用不了d2l pycharm中端输入pip install jupyter安装若失败则&#xff1a; 若网速过慢&#xff0c;则更改镜像源再下载&#xff1a; pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ pip …