TypeScript 中接口的理解与应用场景

news2024/10/10 10:43:39

文章目录

    • 一、接口的定义
    • 二、接口的使用
      • 1. 接口的基本定义
      • 2. 接口的应用示例
      • 3. 可选属性和只读属性
      • 4. 函数类型的属性
      • 5. 类型推断和索引签名
      • 6. 接口的继承
    • 三、应用场景

在这里插入图片描述

一、接口的定义

接口在 TypeScript 中是一系列抽象方法的声明,它代表了一组方法的特征集合。这些方法都是抽象的,需要由具体的类去实现。接口为这些类型命名,并为代码或第三方代码定义了一种约定,使得第三方可以通过这组抽象方法调用具体的类执行具体的方法。
简而言之,接口描述了一个对象的相关属性和方法,但它本身并不提供创建对象实例的具体方法。

二、接口的使用

1. 接口的基本定义

在 TypeScript 中定义接口的基本语法如下:

interface InterfaceName {
  // 属性和方法声明
}

2. 接口的应用示例

假设有一个函数 getUserName,它接受一个 User 对象并返回该对象的 name 属性。我们可以通过接口来描述 User 对象的结构:

interface User {
  name: string;
  age: number;
}
const getUserName = (user: User) => user.name;

在这个例子中,传入的对象必须包含 nameage 属性,否则 TypeScript 在编译阶段会报错。

3. 可选属性和只读属性

  • 可选属性:通过在属性后加上 ? 来表示属性是可选的。
interface User {
  name: string;
  age?: number;
}
  • 只读属性:使用 readonly 关键字来声明只读属性。
interface User {
  name: string;
  age?: number;
  readonly isMale: boolean;
}

修改只读属性时,TypeScript 会发出警告。

4. 函数类型的属性

接口也可以描述对象中的函数类型属性:

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

5. 类型推断和索引签名

  • 类型推断:可以使用类型断言来指定变量类型。
getUserName({ color: 'yellow' } as User);
  • 索引签名:可以通过索引签名来允许接口有额外的属性。
interface User {
  name: string;
  age: number;
  [propName: string]: any;
}

6. 接口的继承

接口可以继承其他接口,使用 extends 关键字来实现。

interface Father {
  color: string;
}
interface Mother {
  height: number;
}
interface Son extends Father, Mother {
  name: string;
  age: number;
}

三、应用场景

在 JavaScript 中,定义一个函数来获取用户信息可能会导致运行时错误,特别是在多人开发的情况下。使用 TypeScript 的接口可以避免这种情况:

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

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

相关文章

【10086网上营业厅-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…

win10家庭版ubantu子系统下载和配置anaconda3

打开anaconda官网的下载页Download Now | Anaconda 找到linux系统,选择这个x86的版本,右键它,选择《复制链接地址》 我现在复制出来的是https://repo.anaconda.com/archive/Anaconda3-2024.06-1-Linux-x86_64.sh 后续可能会有版本更新&…

ChatGPT完成论文润色的提示词分享

学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 在论文写作的最后阶段,润色是确保文章质量的重要步骤。无论是语法检查、句式优化,还是提升语言的连贯性和一致性,润色都能显著提高论文的专业性与可读…

重学SpringBoot3-集成Redis(十一)之地理位置数据存储

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-集成Redis(十一)之地理位置数据存储 1. GEO 命令简介2. 项目环境配置2.1. 依赖引入2.2. Redis 配置 3. GEO 数据存储和查询实现3…

C++ day04(友元 friend、运算符重载、String字符串)

目录 【1】友元 friend 1》概念 2》友元函数 3》友元类 4》友元成员函数 【2】运算符重载 1》概念 2》友元函数运算符重载 ​编辑 3》成员函数运算符重载 4》赋值运算符与类型转换运算符重载 5》注意事项 【3】String 字符串类 【1】友元 friend 1》概念 定义&#x…

成绩管理|基于springBoot的成绩管理系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书(可指定任意题目) 一、摘要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此&…

C# 图像镜像

测试页面: 图像镜像是图像旋转变换的一种特殊情况,通常包括垂直方向和水平方向的镜像。水平镜像通常是以原图像的垂直中轴为中心,将图像分为左右两部分进行堆成变换。如下: 垂直镜像通常是以原图像的水平中轴线为中心,…

Spring Boot 进阶-Spring Boot中如何解决跨域问题

什么是跨域问题 浏览器出于安全考虑,会限制跨域访问,就是不允许跨域请求资源,要求协议,IP和端口必须都相同,其中有一个不同就会产生跨域问题,这就是同源策略。 简单的说A应用只能访问A应用对应的后台返回的数据,B应用只能访问B应用后台的数据,如果A应用通过Ajax请求了B…

国产长芯微LDC5420单通道、16位、串行输入、电流源DAC完全P2P替代AD5420

描述 LDC5420是可编程电流源输出的低成本、精密、完全集成的16位转换器,可满足工业过程控制应用的要求。输出电流范围可编程为4mA至20 mA、0mA至20mA或者0mA至24mA的超量程。输出具有开路保护功能,可以驱动1H的电感负载。这款器件采用10.8 V至40V&#…

全球司库|基于智能化模型算法的高阶应用

连载导语 司库体系建设是企业实现财务数字化转型和资金管理现代化的重要手段,是企业实现战略转型和高质量发展的关键支撑,也是企业应对复杂多变的全球经济环境和风险挑战的重要保障。司库承担着组织中的领导和战略引导作用,越来越多的企业以司…

基于双波长AWG的窄线宽外差拍频激光器

摘要:基于阵列波导光栅的多波长激光源已被证明可以同时提供多个波长和较窄的光线宽。为了产生毫米波信号,我们开发了两种不同的激光结构,并使用光子集成电路进行了单片集成。在这项工作中,我们报告了毫米波范围内的外差信号特性。…

ChatGPT国内中文版镜像网站整理合集(2024/10/06)

一、GPT中文镜像站 ① yixiaai.com 支持GPT4、4o以及o1,支持MJ绘画 ② chat.lify.vip 支持通用全模型,支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4,4o以及MJ绘画 1. 什么是镜像站 镜像站(Mirror Site&#xff…

无人机之飞控仿真技术篇

一、无人机飞控仿真技术的定义 无人机飞控仿真技术主要是指飞行控制系统仿真,它是以无人机的运动情况为研究对象,面向对象的复杂系统仿真。通过该技术,可以模拟无人机的飞行过程,评估飞行控制系统的性能,优化飞行参数&…

鸿蒙OS启动流程

启动流程(基于openharmony4.1) 系统上电加载内核后,按照以下流程完成系统各个服务和应用的启动: 内核加载init进程,一般在bootloader启动内核时通过设置内核的cmdline来指定init的位置。init进程启动后,会挂载tmpfs,…

Liveweb视频汇聚平台:国标GB28181协议下的视频资源整合与应用

随着安防技术的快速发展和智慧城市建设的推进,视频监控系统作为公共安全、城市管理、企业运营等领域的重要基础设施,其重要性和应用范围不断扩大。在这一过程中,GB/T 28181作为国家标准中关于视频监控设备通信协议的规范,正逐渐受…

Cisco Secure Network Analytics 7.5.1 - 领先的网络检测和响应 (NDR) 解决方案

Cisco Secure Network Analytics 7.5.1 - 领先的网络检测和响应 (NDR) 解决方案 Secure Network Analytics (formerly Stealthwatch) - Network Visibility and Segmentation 请访问原文链接:https://sysin.org/blog/cisco-secure-network-analytics/,…

YOLO11改进|注意力机制篇|引入NAM注意力机制

目录 一、【NAM】注意力机制1.1【NAM】注意力介绍1.2【NAM】核心代码 二、添加【NAM】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【NAM】注意力机制 1.1【NAM】注意力介绍 下图是【NAM】的结构图,让我们简单分…

【VUE】双端比较算法

假设我们有两个虚拟节点 oldVnode 和 newVnode,它们分别对应的DOM结构为: 我们需要将 oldVnode 更新为 newVnode,这时就可以使用双端比较算法了。算法本质上是将新旧节点进行一次交叉比较,尽可能地重复使用已有的节点来达到最小…

【含开题报告+文档+PPT+源码】基于过滤协同算法的旅游推荐管理系统设计与实现

开题报告 旅游业作为一种重要的经济活动,对于一个地区的经济发展和文化传承具有重要意义。泉州作为中国华东地区的重要城市,拥有丰富的自然资源和独特的文化底蕴,吸引了大量的游客。然而,随着旅游业的快速发展,游客数…

将长图按宽度切割保存成小图,‌长图图片切图快速操作

长图图片切图技术如同一把锋利的剑,为编辑高手们披荆斩棘,开辟出一条高效操作与创意实现的道路。面对冗长而信息丰富的长图,如何精准地进行切分,以便更好地编辑、管理与利用,成为了每位追求卓越的编辑高手必须掌握的绝…