GPT每日面试题-Typescript中type和interface的区别

news/2024/5/19 7:14:48

充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:typescript中type和interface的区别?

Q:如果在前端面试中,被问到typescript的type和interface的区别是什么,怎么回答最好?

A:当谈论TypeScript中的type和interface时,可以更加详细地探讨它们的特点、用法和适用场景。以下是一份更详细的解释:

Type(类型别名):

  • 定义方式: 使用关键字type,可以给已有类型或复杂类型创建别名。
type MyString = string;
type Point = { x: number, y: number };
type Callback = (result: string) => void;
  • 特点

    • Type可以是简单类型(如基本类型、联合类型、字面量类型等)也可以是复杂类型(如对象类型、函数类型等)。
    • 可以使用交叉类型、联合类型等进行组合,使得类型定义更加灵活。
    • 可以使用类型操作符进行进一步的处理,如Partial、Required、Pick等。
  • 应用场景

    • 适合创建复杂的类型别名,使得代码更易读,减少重复代码。
    • 用于定义联合类型、交叉类型、函数类型等高级类型。
    • 可以用于编写通用的类型工具库。
  • 扩展性

    • Type可以通过简单的赋值或使用交叉类型进行扩展。
    • 可以通过交叉类型(&)将多个类型组合成一个新的类型。
    • 也可以使用类型别名进行简单的类型扩展。
type A = { x: number };
type B = { y: number };
type C = A & B; // C = { x: number, y: number }
type D = C & {z: number;
};
  • 可合并性
    • Type 是可以合并的,这意味着你可以声明相同名称的多个 Type,它们会自动合并成一个类型。例如:
type Name = { firstName: string };
type Name = { lastName: string };
// 这会自动合并成一个类型: { firstName: string, lastName: string }

Interface(接口):

  • 定义方式:使用关键字interface,用于描述对象的结构。
interface Person {name: string;age: number;greet(): void;
}
  • 特点

    • Interface主要用于描述对象的形状,包括属性和方法,不支持基本类型别名。
    • 可以用extends关键字继承其他接口,实现接口的复用。
    • 支持声明合并,可以将多个同名的接口合并成一个。
  • 应用场景

    • 适合描述对象的结构,使得代码更加清晰易读,便于维护和理解。
    • 可以用于定义类的契约,明确类的属性和方法。
    • 用于声明第三方库的类型定义或进行类型声明文件编写。
  • 扩展性

    • Interface可以通过使用extends关键字进行继承。
    • 接口之间可以进行单继承,子接口会继承父接口的所有成员。
    • 一个接口可以继承多个其他接口。
interface A { x: number; }
interface B { y: number; }
interface C extends A, B { z: number; }
  • 可合并性
    • Interface 是不可合并的,如果你声明相同名称的多个 Interface,它们会被视为冲突而导致编译错误。

Type vs Interface:

  • 灵活性: Type相对更灵活,适用于创建复杂类型别名和高级类型;而Interface更专注于对象结构的描述,不支持创建简单类型别名。
  • 扩展性: Type可以通过联合、交叉等方式进行扩展,非常灵活;而Interface只能通过extends关键字继承其他接口,限制了其扩展的方式。
  • 应用场景: 根据具体需求选择使用,Type适合创建复杂类型别名和高级类型,Interface适合描述对象结构和类的契约。

通常来说,如果你需要扩展或实现一个接口,或者用于描述对象的形状,那么使用 Interface 更合适;如果你需要更灵活地定义类型,或者需要使用联合类型、交叉类型等高级类型特性,那么使用 Type 更为合适。


http://www.mrgr.cn/p/00378464

相关文章

ruoyi漏洞总结

若依识别 黑若依 :icon hash"-1231872293 绿若依 :icon hash"706913071” body" 请通过前端地址访 " body" 认证失败,无法访问系统资源 " 如果页面访问显示不正常,可添加默认访问路径尝试是否显示正常 /login?redi…

OpenFeign修改HttpClient为Apache HttpClient 5

OpenFeign中http client 如果不做特殊配置,OpenFeign默认使用JDK自带的HttpURLConnection发送HTTP请求, 由于默认HttpURLConnection没有连接池、性能和效率比较低。所以修改为Apache HttpClient 5。 总结为两步: 加依赖改yml 具体操作请往…

开关门机关

根物体创建动画 子物体录制动画 ctrl6:调用动画窗口 添加关键帧:输入添加关键帧到第几帧,然后点击录制,最后在该物体的面板上修改其位置等,记得添加完要结束录制 搞个父物体是为了让动画的可移植性变高 设置触发器方…

这是一个简单的照明材料网站,后续还会更新

1、首页效果图 代码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>爱德照明网站首页</title><style>/*外部样式*/charset "utf-8";*{margin: 0;padding: 0;box-sizing: border-box;}a{text-dec…

事件标志组

什么是事件标志组&#xff1f; 事件标志位&#xff1a;表明某个事件是否发生&#xff0c;联想&#xff1a;全局变量 flag。通常按位表示&#xff0c;每一个位表示一个事件&#xff08;高8位不算&#xff09;事件标志组是一组事件标志位的集合&#xff0c; 可以简单的理解事件标…

docker原理

Docker原理 在前面我们学习了Docker&#xff0c;接下来我们探究一下Docker的底层技术原理 Linux 命名空间&#xff08;namespace&#xff09;、控制组&#xff08;cgroups&#xff09;和 联合文件系统&#xff08;UnionFS&#xff09; 三大技术支撑了目前 Docker 的实现&…

【多级缓存】多级缓存OpenResty,Canal,nginx本地缓存

多级缓存 安装OpenRestyOpenResty入门OpenResty获取请求参数OpenResty向tomcat服务器发送请求 在nginx与tomcat端之间添加redis缓存Redis本地缓存缓存同步缓存同步策略基于Canal的异步通知安装Canal Canal客户端 安装OpenResty OpenResty是一个基于 Nginx的高性能 Web 平台&am…

路由器的构成

一、路由器简介 路由器是互联网中的关键设备&#xff1a; 连接不同的网络路由器是多个输入端口和多个输出端口的专用计算机&#xff0c;其任务是转发分组&#xff08;转发给下一跳路由器&#xff09;下一跳路由器也按照这种方法处理分组&#xff0c;直到该分组到达终点为止 …

Redisson 分布式锁和同步器

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 redisson 是基于redis的扩展库,使得redis除了应用于缓存以外,还能做队列…

mysql 远程无法连接

mysql 远程无法连接,解决办法:https://blog.csdn.net/Dontla/article/details/133213538

Vue工程化开发和脚手架Vue CLI

目录 一、介绍 二、使用步骤 1. 全局安装&#xff08;一次&#xff09; 2.查看Vue版本 3.创建项目架子&#xff08;项目名不能使用中文&#xff09; 4.启动项目 一、介绍 Vue CLI是Vue官方提供的一个全局命令工具。可以帮助我们快速创建一个开发的Vue项目的标准化基础架子…

深入学习Linux内核页框回收

目录 算法 1.选择目标页 2.PFRA设计 3.反向映射 3.1.匿名页的反向映射 3.2.try_to_unmap_anon()函数 3.3.try_to_unmap_one()函数 映射页的反向映射 优先搜索树 try_to_unmap_file()函数 PFRA实现 最近最少使用(LRU)链表 在LRU链表之间移动页 mark_page_accessed(…

《动手学深度学习》V2(00-10)

文章目录 一、学习目标二、环境搭建三、数据操作1、张量介绍2、运算符介绍3、广播介绍4、索引和切片5、节省内存6、课后练习实现 :fire: 四、数据预处理1、读取数据集2、处理缺失数据3、课后练习实现 :fire:①第一步&#xff1a;造数据②第二步 筛选遍历缺失值③第三步 统计降序…

三角函数公式推导

互补角 1如上图: \[\begin{eqnarray} 设AB=1, \quad 则AC=BM, \quad AM=BC \\ \\ \because \angle ACB=\angle AMB=90^{\circ}=\frac{\pi}{2} \\ \\ \therefore \angle ABC=\theta, \quad \angle ABM=\frac{\pi}{2}-\theta \\ \\ \\ \sin\theta=\frac{AC}{AB} \\ \\ \cos\thet…

SpringBoot 快速开始 Dubbo RPC

文章目录 SpringBoot 快速开始 Dubbo RPC下载 Nacos项目启动项目的创建创建主项目接口定义服务的创建Dubbo 服务提供者的创建服务的消费者创建 添加依赖给 Provider、Consumer 添加依赖 开始写代码定义接口在 Provider 中实现在 Consumer 里面使用创建启动类 注册中心配置启动 …

通过helm在k8s上安装minio

1 helm安装minio 1.1 下载minio 添加仓库 helm repo add bitnami https://charts.bitnami.com/bitnami 将minio拉取下来 helm pull bitnami/minio --version 版本号 解压到本地开始编辑配置文件 tar -zxf minio-xxx.tgz [rootk8s-master01 minio]# vi values.yaml 1.2…

C#技巧之同步与异步

区别 首先&#xff0c;同步就是程序从上往下顺序执行&#xff0c;要执行完当前流程&#xff0c;才能往下个流程去。 而异步&#xff0c;则是启动当前流程以后&#xff0c;不需要等待流程完成&#xff0c;立刻就去执行下一个流程。 同步示例 创建一个窗体&#xff0c;往窗体里…

团队开发 --Android

今天是第一次写,但不是第一天开始,放五一小长假,我的队友回家了,我们两个就属于分工合作,反正就最近几天的成果。 今天不早了,其他注意事项明天说,今天先上代码。MainActivityimport android.content.Intent; import android.os.Bundle; import android.view.View; imp…

232自由口转Profinet网关配置测试案例

232自由口转Profinet网关(XD-PNR100/300),是一种用于将自由协议转换为Profinet协议的设备,可以实现不同网络之间的通信和数据交换。232自由口转Profinet网关高度的灵活性和可靠性使其成为工业自动化领域的重要工具,并将其与Profinet网络无缝集成,实现数据的快速传输和交换。…

[2]自定义Lua解析方式

[2]自定义Lua解析方式 在上文中我们学会学会更改加载路径,加载对应文件夹下的Lua脚本。 默认解析加载的lua脚本存在的文件位置非AB包或者Resources文件夹下往往不能随包体更新,这显然不符合热更需要。因此自定义继承 tolua中lua脚本加载解析类LuaFileUtils来重写对应的lua脚本…