为什么在 TypeScript 中应优先使用类型而非接口

类型和接口是每个 TypeScript 程序中常用的强大功能。然而,由于类型和接口在功能上非常相似,这就引出了一个问题:哪一个更好?

今天,我们将评估类型和接口,并得出结论,为什么在大多数情况下你应该使用类型而不是接口。

它们的区别是什么?

我们分析一下这个 Person 类型和接口定义:

type Person = {name: stringage: number
}interface Person {name: stringage: number
}

显然,类型和接口的语法相似,关键区别在于类型使用 = 定义对象的形状,而接口则没有。不过,事情远不止这些。

可扩展性

在可扩展性方面,许多人认为接口显然是赢家,因为接口可以使用 extends 关键字扩展其他接口。

// 可扩展性示例interface Person extends Job {name: stringage: number
}interface Job {job: string
}// 使用 Person 和 Job 的属性。
const person: Person = {name: "John",age: 25,job: "全栈 Web 开发者",
}

在这里,Person 接口扩展了 Job,因此 Job 接口的属性合并到 Person 中。

另一方面,类型也可以通过使用联合(|)或交叉(&)操作符来扩展现有类型。

// ✅ 可以正常工作 
type Person = {name: stringage: number
} & { job: string }// ❌ 不可以正常工作 
interface Person {name: stringage: number
} & { job: string }
实现

TypeScript 中的接口兼容面向对象编程(OOP),类似于其他语言(如 Java 或 C#)。这意味着接口可以通过 implements 在类中实现。

现在让我们将 Person 定义为一个类,并实现一个新接口 Work,并满足它们之间的契约。

// 实现示例interface Work {doWork: () => void
}class Person implements Work {name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}// 实现 doWork 方法以满足 Work 接口。doWork() {console.log("Working...")}
}const person = new Person("John", 25)
person.doWork()

因此,如果你经常使用 OOP,接口将比类型更适用,因为类型不能直接由类实现。

性能

在谈到性能时,我们指的是 TypeScript 编译器进行的“类型检查”的性能,这随着代码库的增长而呈指数下降。

这就是为什么我们要基准测试类型和接口在类型检查性能方面的优劣。

为什么接口可能有害

TypeScript 中的接口有一个独特的特性,称为声明合并

声明合并是指 TypeScript 编译器将两个或多个具有相同名称的接口合并为一个。

// 初始 Person 接口
interface Person {name: stringage: number
}// 使用“声明合并”精炼 Person 接口
interface Person {gender: string
}// 使用“合并”的接口定义一个新“person”
const person: Person = { name: "John", age: 25, gender: "Male" }

一方面,这个特性允许方便地精炼和扩展现有接口,而不需要更改其他依赖项。

以下是我重新声明 @auth/core/types 模块并精炼 Session 接口的示例。

3e771841fa95614e7bcc290defe78f05.png

这就是一个声明合并的示例,因为我用新的 id: string 属性精炼了原始接口。

这是接口的合理使用场景,因为它允许开发人员轻松扩展库接口。

类型不允许这样做,因为它们在创建后是不可变的。

另一方面,声明合并可能对代码库产生有害且意想不到的影响,主要有以下两个原因:

  1. 优先级顺序:后面的声明总是优先于前面的声明。如果不小心,当声明合并在程序的许多部分发生时,可能会导致意外的问题。

  2. 与类的不安全合并:由于 TypeScript 编译器不检查属性初始化,这可能会导致意外的运行时错误。类型没有这个问题,因此更简单、更安全。

结论

除非特定的接口行为是必要的,例如可扩展的精炼或使用 OOP 实现,否则最好坚持使用类型。类型灵活、简单,并且避免了与声明合并相关的陷阱。

类型在性能方面与接口相同,这为你选择类型而不是接口提供了另一个理由。

最后:

vue2与vue3技巧合集

VueUse源码解读

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

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

相关文章

HikariCP连接池初识

HikariCP的简单介绍 hikari-光,hikariCP取义:像光一样轻和快的Connetion Pool。这个几乎只用java写的中间件连接池,极其轻量并注重性能,HikariCP目前已是SpringBoot默认的连接池,伴随着SpringBoot和微服务的普及&…

ssm汽车在线销售系统

摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存…

稀疏高效扩散模型:推动扩散模型的部署与应用

数据驱动的世界中,生成模型扮演着至关重要的角色,尤其是在需要创建逼真样本的任务中。扩散模型(Diffusion Models, DM),以其卓越的样本质量和广泛的模式覆盖能力,已经成为众多数据生成任务的首选。然而&…

nginx: [error] invalid PID number ““ in “/run/nginx.pid“

两种问题,我自己碰到的情况 ./nginx -s reload执行命令后报错 nginx: [error] invalid PID number ““ in “/run/nginx.pid“ 第一种情况,pid被注释了 /usr/local/nginx/conf/nginx.conf #user nobody; worker_processes 1;// 可能是这里被注释了…

【UE5:CesiumForUnreal】——从地球全景聚焦到某区域的动画制作

目录 1.添加Render Texture并和SceneCapture2D关联 1.1 场景准备 1.2 添加Render Texture 1.3 添加SceneCapture2D并关联 2.在Widget上显示Render Texture 2.1 创建Widget 2.2 配置Widget 2.3 添加控制按钮 2.4 添加窗口逻辑 3.制作Sequencer动画 3.1 创建Sequencer…

基于实验的电动汽车动力电池SOC

前言 本文为笔者在学习《基于MATLAB的新能源汽车仿真》过程中学习笔记,所涉及的表格数据和公式均为书籍里的。仿真数据是网上找的恒电流放电数据。本文仅作为笔者的入门学习记录。 一、分析动力电池SOC估算方法 SOC是指动力电池按照规定放电条件可以释放的容量占…

计算机网络 期末复习(谢希仁版本)第5章

**屏蔽作用:**运输层向高层用户屏蔽了下面网络核心的细节(如网络拓扑、所采用的路由选择协议等),使应用进程看见的就是好像在两个运输层实体之间有一条端到端的逻辑通信信道。 10. 端口用一个 16 位端口号进行标志,允许…

学习使用Opentelemetry python SDK

前言 📢博客主页:程序源⠀-CSDN博客 📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正! 一、什么是 OpenTelemetry OpenTelemetry 由 OpenTracing 和 OpenCensus 项目合并而成,是一组规范、工具、API…

HQChart小程序教程4-动态控制手势滚动页面

动态控制手势滚动页面 示例效果canvas 控制页面滚动属性步骤1. 使用变量绑定disable-scroll2. 在手势处理函数中控制是否滚动页面 交流QQ群HQChart代码地址 示例效果 canvas 控制页面滚动属性 根据官方文档,disable-scroll 属性是控制画布手势是否可以滚动页面。 h…

《python程序语言设计》2018版第5章第47题绘制随机球,在一个宽120高100的矩形里绘制随机的点

这个题其实并不难。 首先我们利用turtle功能绘制一个矩形,圆心点题里要求的是0,0 这个好办 然后我们根据宽120,高100计算一下。肯定是正负两个值参与其中。 坐标点如下 建立矩形代码如下 turtle.penup() turtle.goto(-60, 50) turtle.pend…

【Redis】什么是Redis缓存 雪崩、穿透、击穿?(一篇文章就够了)

目录 什么是Redis? Redis的正常存储流程? 什么是Redis缓存雪崩? 缓存雪崩 缓存预热 缓存失效时间的随机性 什么是Redis缓存穿透? 缓存穿透 缓存空对象 BloomFilter(布隆过滤器) 什么是Redis缓存击穿&#…

【Python教程】2-函数、逻辑运算与条件判断

在整理自己的笔记的时候发现了当年学习python时候整理的笔记,稍微整理一下,分享出来,方便记录和查看吧。个人觉得如果想简单了解一名语言或者技术,最简单的方式就是通过菜鸟教程去学习一下。今后会从python开始重新更新&#xff0…

TransformerFAM:革新深度学习的新型注意力机制

深度学习领域的一项突破性技术——Transformer架构,已经彻底改变了我们处理序列数据的方式。然而,Transformer在处理长序列数据时面临的二次复杂度问题,限制了其在某些应用场景下的潜力。针对这一挑战,研究者们提出了一种名为Tran…

window wsl2的ubuntu如何配置代理获取docker image

最近两天,docker pull一直下不来docker image, 研究了下可以通过代理pull, 我的是window电脑下的linux子系统wsl2, 装的是ubuntu跑docker. # 创建/etc/systemd/system/docker.service.d路径 sudo mkdir -p /etc/systemd/system/docker.service.d # 创建 http-proxy…

[ue5]建模场景学习笔记(5)——必修内容可交互的地形,交互沙(3)

1.需求分析: 我们现在已经能够让这片地形出现在任意地方,只要角色走在这片地形上,就能够产生痕迹,但这片区域总是需要人工指定,又无法把这片区域无限扩大(显存爆炸),因此尝试使角色无…

【BUG】已解决:Could not find a version that satisfies the requirement tensorflow

已解决:Could not find a version that satisfies the requirement tensorflow 欢迎来到我的主页,我是博主英杰,211科班出身,就职于医疗科技公司,热衷分享知识,同时是武汉城市开发者社区主理人 擅长.net、C…

ARM-V9 RME(Realm Management Extension)系统架构之系统安全能力的架构差异

安全之安全(security)博客目录导读 RME系统中的应用处理单元(PE)之间的架构差异可能会带来潜在的安全风险并增加管理软件的复杂性。例如,通过在ID_AA64MMFR0_EL1.PARange中为每个PE设置不同的值来支持不同的物理范围,可能会妨碍内…

Foxmail邮箱的使用方法和功能最全介绍

Foxmail邮箱是我们办公邮箱中比较有代表性和使用性的一款邮箱软件,今天笔者为大家介绍一下Foxmail邮箱的功能和使用方法。 1、首先我们从安装Foxmail邮箱开始 2、点击安装等待安装成功 3、双击打开 ,出现邮箱设置界面输入我们的账号密码,点击…

Here Doucument

一、Here Document概述 1.概念 使用I/0重定向的方式将命令列表提供给交互式程序 标准输入的一种替代品 2.语法格式 命令 <<标记 标记 3.注意事项 标记可以使用任意合法字符&#xff08;通常为EOF&#xff09; 结尾的标记一定要顶格写&#xff0c;前面不能有任何字符…

2024年11个博客初学者建议

博客仍然是在线赚钱的最佳机会之一&#xff0c;因为您可以吸引受众&#xff0c;然后销售产品、服务或赞助。 然而&#xff0c;如果您刚刚开始博客生涯&#xff0c;那么建立一个可以带来数千美元收入的博客的前景可能会让您感到畏惧。 博客领域的竞争比以往更加激烈&#xff0…