TypeScript 基础学习笔记:interface 与 type 的异同

在这里插入图片描述


TypeScript 学习笔记:interfacetype 的异同

🎣 引言

TypeScript的世界里,精准的类型定义是保证代码质量与团队协作效率的关键。interfacetype 作为两种核心的类型定义工具,它们各自承载着不同的设计意图与应用场景。本文旨在清晰阐述两者的基本概念、应用场景及核心差异,帮助开发者在实际编码过程中做出更为合适的选择,进一步提升代码的健壮性和可维护性。

🚀 快速入门

TypeScript 中,类型系统是为了增强 JavaScript类型安全interfacetype 都是创建自定义类型的手段,但它们各自有着独特的应用场景和特点。

1️⃣ Interface(接口)

📋 定义

interface 用于描述对象的形状(shape),即一组必须遵循的属性和方法的集合。它可以用于类的实现、函数参数的类型约束,甚至是变量的类型注解。

interface Person {name: string;age: number;greet(): void; // 描述一个方法
}
🤝 实现

类可以实现一个接口,强制类具有接口规定的属性和方法。

class Student implements Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}greet(): void {console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old.`);}
}
💡 特点
  • 可扩展性:接口可以合并(通过重复声明接口名并添加新成员),实现接口的类或接口可以逐渐积累成员。
  • 面向对象友好:更适合面向对象编程中的抽象定义。

2️⃣ Type Aliases(类型别名)

📜 定义

type 关键字用于创建一个新的名字来引用现有的类型,它可以是原始类型、联合类型、元组类型、甚至其他接口类型。

type StringOrNumber = string | number;
type Point = [number, number];
type Admin = { role: 'admin'; permissions: string[] 
};
🎯 应用
  • 简单替换:简化复杂的类型表达式。
  • 联合类型:定义可以是多种类型的变量。
  • 接口兼容性替代:尽管 type 不能被继承,但可以用来定义对象类型,类似于 interface
🧠 特点
  • 灵活性type 更灵活,可以定义函数类型、元组、联合类型等。
  • 不可扩展:与接口相比,类型别名一旦定义,就不能像接口那样通过合并来扩展。
  • 互斥性:不能用 implements 关键字实现 type,适合非面向对象的场景。

📊 interfacetype 的区别

  • 扩展性interface 支持后续扩展,而 type 不支持。
  • 用途interface 适用于定义对象形状,尤其是面向对象设计;type 更通用,适用于各种类型定义,包括但不限于对象类型。
  • 语法差异interface 可以直接定义方法签名,而 type 定义对象类型时需使用对象字面量形式。

🌟 实践建议

  • 对于需要描述对象结构或实现多态的场景,优先考虑使用 interface
  • 当需要定义复杂的类型组合或函数类型时,使用 type 可能更加简洁和灵活。
  • 根据具体需求和团队编码规范来决定使用哪个,两者并非互斥,经常需要配合使用以达到最佳效果。

🚀 总结

综上所述,interfacetype 都是TypeScript中实现类型安全的重要机制,它们各有千秋,服务于不同的场景需求。

interface凭借其开放性和面向对象的特性,非常适合用于定义和扩展对象结构及类的契约;而type则以其灵活性和多样性,在处理联合类型、元组类型及更复杂的类型定义时展现出独特优势。

开发者应当根据具体的项目需求和代码风格,合理选择使用interfacetype,或是两者结合,以达到最优的类型系统设计。理解它们之间的差异与联系,是每位TypeScript开发者技能提升的重要一环。

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

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

相关文章

分布式与一致性协议之ZAB协议(二)

ZAB协议 ZAB协议是如何实现操作地顺序性的? 如果用一句话解释ZAB协议到底是什么,我觉得它是能保证操作顺序性的、基于主备模式的原子广播协议。 接下来,还是以指令X、Y为例具体演示一下,帮助你更好地理解为什么ZAB协议能实现操作…

解决一个朋友的nbcio-boot的mysql数据库问题

1、原先安装mysql5.7数据库,导入我的项目里的带数据有报错信息 原因不明 2、只能建议用docker进行msyql5.7的安装 如下,可以修改成自己需要的信息 docker run -p 3306:3306 --name mastermysql -v /home/mydata/mysql/data:/var/lib/mysql -e MYSQL_R…

Pycharm安装包numpy和matplotlib安装

环境 python 3.12 Pycharm 2023.1 安装包 创建图表的 numpy 库和 matplotlib 库 安装过程出现的问题 setuptools工具包没有安装 Python packaging tool setuptools not found文件 -> 设置 -> 项目:xxx -> python解释器界面显示不出已安装的软件包,系…

Vue3+.NET6前后端分离式管理后台实战(十七)

1,Vue3.NET6前后端分离式管理后台实战(十七)已经在微信公众号更新,有兴趣的扫码关注一起交流学习。

03 - 步骤 Kafka producer

简介 Kafka producer 步骤,用于将 Kettle 中经过处理或转换的数据发送到 Kafka 的主题中 使用 场景 我需要把经过Kettle处理完的数据发送到一个Kafka中,让后端服务器进行下一步处理。 1、拖拽 Kafka producer 到面板 2、配置 Kafka producer 3、调试…

一、写给Android开发者之harmony入门

一、创建新项目 对比 android-studio:ability类似安卓activity ability分为两种类型(Stage模型) UIAbility和Extensionability(提供系统服务和后台任务) 启动模式 1、 singleton启动模式:单例 2、 multiton启动模式&#xff1…

TinTin Web3 Bounty 挑战杯第二期再启程,NEAR 生态邀请你来找 Bug!

对 Web3 来说,Bounty 任务应该是普通人获得行业“一杯羹”的重要捷径! 通过深入学习各类 Web3 公链技术,凭借实战锻炼开发创新项目,或完善已有网络运行中出现的问题,就有机会更加快速了解其底层技术逻辑,更…

笔记:编写程序,绘制一个展示支付宝月账单报告的饼图

文章目录 前言一、饼图是什么?二、编写代码总结 前言 笔记:编写程序,绘制一个展示支付宝月账单报告的饼图 (1) 导入 matplotlib.pyplot 模块; (2) 准备饼图所需的数据; …

在Node.js(express 框架)中使用 nodemailer 实现邮箱注册功能

文章目录 一、准备工作1、安装 nodemailer2、打开 QQ(此处使用QQ邮箱) 的 IMAP/SMTP服务 二、功能实现1、发送邮件功能封装2、生成随机验证码3、发送邮箱验证码4、注册功能 三、邮件接收消息展示四、参考资料 一、准备工作 1、安装 nodemailer yarn add nodemailer 2、打开 QQ…

Verilog中求两个数的差值

根据输入信号a,b的大小关系,求解两个数的差值:输入信号a,b为8bit位宽的无符号数。如果a>b,则输出a-b,如果a≤b,则输出b-a。 接口信号图如下: 代码如下: (CSDN代码块不支持Veril…

QT程序简单国际化实验

文章目录 第一步:新建一个QT工程第二步:添加控件第三步:在pro文件中添加内容第四步:更新文件第五步:打开QT的Linguist第六步:添加翻译内容第七步:回到QT Creator中添加文件第八步:给…

论文精读-存内计算芯片研究进展及应用

文章目录 论文精读-存内计算芯片研究进展及应用概述背景介绍前人工作 存内计算3.1 SRAM存内计算3.2 DRAM存内计算3.3 ReRAM/PCM存内计算3.4 MRAM存内计算3.5 NOR Flash存内计算3.6 基于其他介质的存内计算3.7 存内计算芯片应用场景 总结QA 论文精读-存内计算芯片研究进展及应用…