typescript里面 interface 和 type 的区别

news/2024/9/19 21:01:44/文章来源:https://www.cnblogs.com/yaoyu7/p/18421330

标题的这个问题,最近面试遇到了四五次。

今天来解决一下

一、type和interface的定义

type关键字可以定义一个集合,可以包含各种类型的属性和值,以用来描述对象、函数、联合类型、交叉类型等。

type A = string;  // 声明了一个类型别名A,同时它的类型等价于string类型 

它的主要作用是对一组类型或一个特定类型结构进行封装,以便于在其它地方进行复用。

比如抽离一组联合类型

type StatusCode = 200 | 301 | 400 | 500 | 502;
type PossibleDataTypes = string | number | (() => unknown);const status: StatusCode = 502;

声明一个对象类型

type Person = {name: string;age: number;sex: 0 | 1;
};

interface: 它定义了一个对象的形状,描述了对象应该具有的属性及类型

interface Person{name:string;age:number;sex:0 | 1;            
}

通过上面示例可以看出,它们两个描述对象结构时的语法略有不同。type使用等号来定义类型别名,而interface使用花括号直接定义接口的成员。

二 、type 和 interface 的可扩展性

interface: 可以通过声明合并来扩展。这意味着你可以多次声明同一个接口,并将它们合并为一个。接口支持扩展多个接口,提供了一种强大的方式来构建和契约。

interface Person{name:string;
}interface Person{age:number
}// 上面的两个等价于下面这个
interface Person{name:string;age:number
}

也可以使用extends 关键字进行继承

interface Fruit{
name:string
}interface Apple extends Fruit{kind:stirng
}

type: 不能通过声明合并来扩展。 但是可以通过联合类型( | )和交叉类型(&)进行组合

type Name = {name:string
}type Age = {age:number
}type Person = Name & Age

type: 如果对类型别名进行重复定义,typescript会报错。这意味着不能重新定义一个已存在的type

type A = { x: string };
type A = { y: string }; // 错误: 重复定义

 

三、声明合并

接口:支持。

类型别名:不支持

 

四、继承与交叉类型

接口:可以通过 extends关键字继承其它接口或类。

类型别名:可以通过 & 符号创建交叉类型,以组合现有的多种类型

 

参考:

TypeScript 中的 type 和 interface:你真的了解它们的不同吗? - 掘金 (juejin.cn)

 

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

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

相关文章

Ubuntu 18.04.6 TLS版本安装docker问题

技术问题求助: 版本号: Ubuntu 18.04.6 TLS Docker version 24.0.2, build cb74dfc 使用以上版本的ubuntu安装完成docker,安装完成之后使用docker下载镜像,报以下错误:尝试1:修改镜像源: 新建文件:vim /etc/docker/daemon.json root@ubuntu:~# cat /etc/docker/daemon…

github搭建图床配合typora

github搭建图床配合typora 目录github搭建图床配合typoragithub搭建图床利用PicGo上传图片typora配合实现自动上传 好久没有学习了。。。看到博客园发的求救博客,五味杂陈,除了充个会员,就是写写博客活跃一下,支持一下园子 重拾坚果云,发现之前笔记里很多图片用的公共图床…

数字自然资源领域的实现路径

在数字化浪潮的推动下,自然资源的管理与利用正经历着前所未有的变革。本文将从测绘地理信息与遥感专业的角度,深度分析数字自然资源领域的实现路径。 1. 基础数据的数字化数字自然资源的构建,首先需要实现基础数据的数字化。这包括地形地貌、土地利用、植被覆盖、水资源等自…

易优eyoucms提示“异常登录,不在特定范围内”安全锁导致的

data/conf/uneyousafe.txt 丢一个这个文件,里面空也没事(安全锁就立马失效了) uneyousafe.txt 放在 data/conf/ 目录里扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。承接:企业仿站、网站修改、网…

为什么寄存器需要建立时间和保持时间约束?——从门级角度理解

目录 1.建立时间与保持时间 2.从寄存器的内部结构理解建立时间与保持时间 2.1寄存器的结构 2.2主从锁存器构成的寄存器 2.3传输门构成的寄存器 3.查看寄存器的建立时间和保持时间 文章内容为博主学习记录,如有错误,欢迎在评论区指正。 1.建立时间与保持时间 寄存器的建立时…

java学习9.19

结合前端,在本地运行实现登陆操作。 将在输入框的数据传给服务器,服务器再通过调用数据库的数据进行对比,实现简单的判断逻辑 到这里的我就感觉内容多了起来,在之前连接数据库,数据库操作的时候,跟着教程走,只是知道简单的用法也能在之后自行配置 这里的话数据库等操作变…

整除理论

整除的基本知识 有 \(12\) 个苹果,恰好平分给 \(x\) 个人(每个人分到的苹果完整且数量相同),\(x\) 能取到哪些值? 分别以 \(1\) 到 \(12\) 假设 \(x\),发现只有 \(x=1,2,3,4,6,12\) 这 \(6\) 个数字满足,这里用到的就是整除的概念。整数之间的整除性,体现为两个整数相除…

VulnHub-Bilu_b0x靶机笔记

Bilu_b0x 靶机 概述 Vulnhub 的一个靶机,包含了 sql 注入,文件包含,代码审计,内核提权。整体也是比较简单的内容,和大家一起学习 Billu_b0x.zip 靶机地址: https://pan.baidu.com/s/1VWazR7tpm2xJZIGUSzFvDw?pwd = u785 提取码: u785 一、nmap 扫描 1)主机发现 sudo nm…

春秋云镜 Hospital

春秋云镜 Hospital扔fscan去扫一下heapdump泄露,然而不知道在哪下.dirsearch扫一下访问/actuator/heapdump去下载泄露文件 直接用长城杯用的工具扫 java -jar JDumpSpider-1.1-SNAPSHOT-full.jar heapdump得到key为GAYysgMQhG7/CzIJlVpR2g==,使用shiro综合利用去打弹个shell ba…

章14——集合——Collection 接口

collection 里面可以存放不同数据类型,因为里面是 Object 遍历 Collection 接口方法1:迭代器 但凡实现了 collection 接口都可以用迭代器ArrayList list = new ArrayList();//得到一个集合的迭代器Iterator iterator = list.iterator();while (iterator.hasNext()){//next 函…

分享3款开源、免费的Avalonia UI控件库

Avalonia介绍 Avalonia是一个强大的框架,使开发人员能够使用.NET创建跨平台应用程序。它使用自己的渲染引擎绘制UI控件,确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。这意味着开发人员可以共享他们的UI代码,并在不同的目标平台…