ts 中的 type 和 interface 有什么区别?

news/2024/7/25 20:51:13/文章来源:https://blog.csdn.net/qq_44376306/article/details/139250328

一、用法举例

interface Person {name: stringage: number
}const person: Person = {name: 'Kite',age: 24
}
type Person = {name: stringage: number
}const person: Person = {name: 'Kite',age: 24
}

二、翻阅 ts 的官方文档:

1、interface 接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
2、type 类型别名

类型别名会给一个类型起个新名字。 类型别名有时和接口很像,但是可以作用于原始值联合类型元组以及其它任何你需要手写的类型。

类型别名只是给类型起一个新名字。它并不是一个类型,只是一个别名而已, 就像通常我们 在 alias 下给 src 目录配置 @ 别名。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {if (typeof n === 'string') {return n;}else {return n();}
}
// 调用getName 时传字符串和函数都可以,如果传的格式有问题,就会提示
getName('Kite')
getName(() => 'Kite')

interface 叫 接口 和 type 叫类型别名,只是有时候两者都能实现同样的功能,才会经常被混淆。

三、两者相同点

1、都可以定义一个对象或函数

定义对象前面已经说了,我们来看一下如何定义函数。

type addType = (num1:number,num2:number) => numberinterface addType {(num1:number,num2:number):number
}

这两种写法都可以定义函数类型

const add:addType = (num1, num2) => {return num1 + num2
}

2、都允许继承(extends)

我们定义一个 Person 类型和 Student 类型,Student 继承自 Person,可以有下面四种方式

  • interface 继承 interface
interface Person { name: string 
}
interface Student extends Person { grade: number 
}const person:Student = {name: 'lin',grade: 100
}
  • type 继承 type
type Person = { name: string 
}
type Student = Person & { grade: number  }    // 用交叉类型
  • interface 继承 type
type Person = { name: string 
}
interface Student extends Person { grade: number 
}
  • type 继承 interface
interface Person { name: string 
}type Student = Person & { grade: number  }    // 用交叉类型

interface 使用 extends 实现继承, type 使用交叉类型实现继承

四、两者不同点

1、type 可以,interface 不行

类型别名会给一个类型起个新名字。 类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。
声明基本类型、联合类型、交叉类型、元组

type Name = string                              // 基本类型type arrItem = number | string                  // 联合类型const arr: arrItem[] = [1,'2', 3]type Person = { name: Name 
}type Student = Person & { grade: number  }       // 交叉类型type Teacher = Person & { major: string  } type StudentAndTeacherList = [Student, Teacher]  // 元组类型const list:StudentAndTeacherList = [{ name: 'lin', grade: 100 }, { name: 'liu', major: 'Chinese' }
]
2、interface可以,type 不行

合并重复声明

interface Person {name: string
}interface Person {         // 重复声明 interface,就合并了age: number
}const person: Person = {name: 'lin',age: 18
}

重复声明 type ,就报错了

type Person = {name: string
}type Person = {     // Duplicate identifier 'Person'age: number
}const person: Person = {name: 'lin',age: 18
}

五、小结

  • interface 和 type 被 TS 设计出来,是完全不同的东西,有各自的职责。
  • interface 是接口,用于描述一个对象。type 是类型别名,用于给各种类型定义别名,让 TS 写起来更简洁、清晰。
  • 使用场景: 一般使用组合或者交叉类型的时候,用 type ; 一般要用类的 extends 或 implements 时,用 interface。

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

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

相关文章

nss做题

[NCTF 2018]签到题 1.f12在index.php中找到flag [NSSCTF 2022 Spring Recruit]ezgame 1.在js源码中就有flag [UUCTF 2022 新生赛]websign 1.打开环境后发现ctrlu和右键,f12都被禁用了。两种方法,第一种:禁用js;第二中提前打开…

亚马逊高效广告打法及数据优化,亚马逊高阶广告打法课

课程下载:https://download.csdn.net/download/m0_66047725/89342733 更多资源下载:关注我。 课程内容: 001.1-亚马逊的广告漏斗和A9算法的升级变化.mp4 002.2-流量入口解析和广告的曝光机制.mp4 003.3-标签理论 .mp4 004.4-不同广告类…

GoldenEye-v1(vulnhub)靶机练习实践报告

GoldenEye-v1****靶机练习实践报告 一、安装靶机 靶机是.ova文件,需要用VirtualBox打开,但我习惯于使用VMWare,因此修改靶机文件,使其适用于VMWare打开。 解压ova文件,得到.ovf文件和.vmdk文件。 用记事本打开.ovf文件并修改“…

预训练大模型

参考代码:https://github.com/LlamaFamily/Llama-Chinese

AI大模型在测试中的深度应用与实践案例

文章目录 1. 示例项目背景2. 环境准备3. 代码实现3.1. 自动生成测试用例3.2. 自动化测试脚本3.3. 性能测试3.4. 结果分析 4. 进一步深入4.1. 集成CI/CD管道4.1.1 Jenkins示例 4.2. 详细的负载测试和性能监控4.2.1 Locust示例 4.3. 测试结果分析与报告 5. 进一步集成和优化5.1. …

excel里如何将数据分组转置?

这个表格怎样转换为下表?按照国家来分组,把不同年份对应的不同序列值进行转置?? 这演示用数据透视表就完成这个数据转换。 1.创建数据透视表 选中数据中任意单元格,点击插入选项卡,数据透视表,…

【数学建模】碎纸片的拼接复原

2013高教社杯全国大学生数学建模竞赛B题 问题一模型一模型二条件设立思路 问题求解 问题一 已知 d i d_i di​为第 i i i张图片图片的像素矩阵 已知 d i d_i di​都是 n ∗ m n*m n∗m二维矩阵 假设有 N N N张图片 模型一 我们认为对应位置像素匹配为 d i [ j ] [ 1 ] d k…

clocking wizard IP核通过AXI4-Lite接口实现动态重新配置应用实例

在最近的FPGA应用中,应用到了基于Zynq 7000的Uart串口设计,为了让串口的时钟更精确,采用了外部时钟模式,如下图所示。外部时钟连接到了Clocking Wizard IP核的输出端。 在串口通信时,发现串口有错码出现。例如&#xf…

leetcode124 二叉树中的最大路径和-dp

题目 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root &…

C++模板方法模式

文章目录 1. 定义抽象基类(Abstract Class)2. 实现具体子类(Concrete Class)3. 使用模板方法模板方法模式的优点模板方法模式的应用场景注意事项实现示例抽象类(模板)具体实现类客户端代码 总结 模板方法模…

Elasticsearch (ES) (上万字)详细学习总结

一、认识ES 二、ES相关安装和部署(elasticsearch 、kbana、ik) 这部分的内容可以查看我之前写的Docker常用部署这篇文章 三、Mapping映射 3.1 Mapping映射属性 3.2 索引库操作 3.2.1 遵循Restful规范说明 3.2.2 具体使用方式说明 3.2.3增删改查示例 #创建 PUT /heima {&q…

【Java面试】四、MySQL篇(上)

文章目录 1、定位慢查询2、慢查询的原因分析3、索引3.1 数据结构选用:二叉树 & 红黑树3.2 数据结构选用:B树 4、聚簇索引、非聚簇索引、回表查询4.1 聚簇索引、非聚簇索引4.2 回表查询 5、覆盖索引、超大分页优化5.1 覆盖索引5.2 超大分页处理 6、索…

存储+调优:存储-memcached

存储调优:存储-memcached 什么是memcached? 高性能的分布式内存缓存服务器。通过缓存数据库的查询结果,减少数据库访问次数,以提高动态Web应用的速度、提高可扩展性。 在memcached中存什么? 尽快被保存 访问频率高 1.数据保…

【Unity】Unity项目转抖音小游戏(三)资源分包,抖音云CDN

业务需求,开始接触一下抖音小游戏相关的内容,开发过程中记录一下流程。 使用资源分包可以优化游戏启动速度,是抖音小游戏推荐的一种方式,抖音云也提供存放资源的CDN服务 抖音云官方文档:https://developer.open-douyi…

R可视化:另类的箱线图

介绍 方格状态的箱线图 加载R包 knitr::opts_chunk$set(echo TRUE, message FALSE, warning FALSE) library(patternplot) library(png) library(ggplot2) library(gridExtra)rm(list ls()) options(stringsAsFactors F)导入数据 data <- read.csv(system.file(&qu…

雷达基数据绘制成雷达图

x波段雷达基数据绘制成雷达图 1.雷达基数据格式Z_RADR_I_ZR001_20240521020002_O_DOR_YLD2-D_CAP_FMT.bin.bz2 2.基数据读取 python f StandardData(i) # 新版本标准数据radarTime f.scantime # 获取雷达时次date_str radarTime.strftime(%Y-%m-%d %H:%M:%S)date_str d…

C#【进阶】排序进阶

排序进阶 文章目录 插入排序希尔排序归并排序快速排序堆排序 插入排序 #region 知识点一 插入排序的基本原理 // 8 7 1 5 4 2 6 3 9 // 两个区域 // 排序区 // 未排序区 // 用一个索引值做分水岭// 未排序区元素 // 与排序区元素比较 // 插入到合适位置 // 直到未排序区清空 #e…

Docker(三) 容器管理

1 容器管理概述 Docker 的容器管理可以通过 Docker CLI 命令行工具来完成。Docker 提供了丰富的命令&#xff0c;用于管理容器的创建、启动、停止、删除、暂停、恢复等操作。 以下是一些常用的 Docker 容器命令&#xff1a; 1、docker run&#xff1a;用于创建并启动一个容器。…

Qt教程3-Ubuntu(x86_64)上配置arm64(aarch64)交叉编译环境及QT编译arm64架构工程

汇创慧玩 写在前面1. 查看系统架构相关指令2. ARM64交叉编译器环境搭建3. Qt编译arm64环境搭建4. 配置 Qt的本地aarch64交叉编译器5. 工程建立及编译验证 写在前面 苦辣酸甜时光八载&#xff0c;春夏秋冬志此一生 Qt简介&#xff1a; Qt&#xff08;官方发音 [kju:t]&#xff…

Spring Boot集成六大常用中间件,附集成源码,亲测有效

目录 万字论文&#xff0c;从0到1&#xff0c;只需1小时获取途径1、Spring Boot如何集成Spring Data JPA&#xff1f;2、Spring Boot如何集成Spring Security&#xff1f;3、Spring Boot如何集成Redis&#xff1f;4、Spring Boot如何集成RabbitMQ&#xff1f;5、Spring Boot如何…