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

一、用法举例

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.mzph.cn/bicheng/17500.shtml

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

相关文章

Weblogic SSRF漏洞 [CVE-2014-4210]

漏洞复现环境搭建请参考 http://t.csdnimg.cn/svKal docker未能成功启动redis请参考 http://t.csdnimg.cn/5osP3 漏洞原理 Weblogic的uddi组件提供了从其他服务器应用获取数据的功能并且没有对目标地址做过滤和限制,造成了SSRF漏洞,利用该漏洞可以向内…

【AJAX前端框架】Asynchronous Javascript And Xml

1 传统请求及缺点 传统的请求都有哪些? 直接在浏览器地址栏上输入URL。点击超链接提交form表单使用JS代码发送请求 window.open(url)document.location.href urlwindow.location.href url… 传统请求存在的问题 页面全部刷新导致了用户的体验较差。传统的请求导…

安泰电子:高压功率放大器应用场合介绍

高压功率放大器是一种电子设备,用于将低电压信号放大到较高电压水平,以满足各种应用需求。它在多个领域中具有广泛的应用,包括科学研究、工业生产、通信技术以及医疗设备。下面安泰电子将介绍高压功率放大器的应用场合。 科学研究 高压功率放…

【最优化方法】实验一 熟悉MATLAB基本功能

实验一  熟悉MATLAB基本功能 实验的目的和要求:在本次实验中,通过亲临使用MATLAB,对该软件做一全面了解并掌握重点内容。 实验内容: 1、全面了解MATLAB系统 2、实验常用工具的具体操作和功能 学习建…

在Open AI的Assistant API中,Thread代表什么?

在OpenAI的Assistant API中,Thread通常代表一系列相关的对话,保持对话的上下文和连贯性。这对于创建连续对话非常重要,因为它允许模型记住先前的交互,并在随后的响应中参考这些信息。 具体作用 保持上下文:Thread可以…

深入学习Python:掌握面向对象编程

在上一篇文章中,我们介绍了Python的基本语法和概念,包括变量、数据类型、条件语句、循环、函数和文件操作。接下来,我们将深入探讨Python的面向对象编程(OOP)特性,这是现代编程中的一个重要概念。通过这篇文章,你将学会如何使用类和对象来组织和管理你的代码。 1. 面向…

哇!数据中台竟是企业数字化转型的关键力量!

在当今数字化浪潮席卷的时代,数据中台正成为企业实现数字化转型的关键力量。那么,究竟什么是数据中台呢?它乃是一种持续让企业数据活跃起来的机制,能够将企业内各部分数据汇聚至一个平台,达成数据的统一化管理。 数据中…

Linux快速定位日志 排查bug技巧和常用命令

1. 快速根据关键字定位错误信息 grep 在 Linux 系统中,可以使用 grep 命令来查找日志文件中包含特定关键字的行。假设你的日志文件路径为 /var/log/myapp.log,你想要查找包含关键字 "abc" 的日志内容,可以按照以下步骤操作&#…

机器学习中的距离公式

1. 欧式距离 (Euclidean Distance) 公式: [ d ( p , q ) = ∑ i = 1 n ( p i − q i

Intel base instruction -- cmove

Conditional Move&#xff1b;以操作码&#xff08;条件码&#xff09;区分不同的移动条件。 opcode 以 0F 4* 打头&#xff1b; /*509a: eb 0b jmp 50a7 <__sprintf_chkplt0x2937> 509c: 0f 1f 40 00 nopl 0x0(%rax)*/…

TIM(Timer)简介

TIM&#xff08;Timer&#xff09;定时器介绍 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时不仅具备基本的定时中断功能&#xff0c;而且…

maven的下载以及配置的详细教程(附网盘下载地址)

文章目录 下载配置IDEA内部使用配置 下载 1.百度网盘下载 链接: https://pan.baidu.com/s/1LD9wOMFalLL49XUscU4qnQ?pwd1234 提取码: 1234 2.解压即可 配置 1.打开安装文件下conf下的settings.xml文件&#xff0c;我的如下 2.修改配置信息&#xff08;目的是为了修改本地…

【Fiddler抓包工具】第五节.安卓、IOS抓包+fildder插件

文章目录 前言一、HTTPS抓包 1.1 HTTPS与HTTP区别 1.2 HTTPS抓包设置过程 1.3 错误解决方法 1.4 验证证书是否安装成功 1.5 Firefox HTTPS请求捕获二、IOS设备APP抓包 2.1 APP抓包Fiddler设置 2.2 APP抓包IOS设备设置 2.3 And…

【Redis】 关于 Redis 集合类型

文章目录 &#x1f343;前言&#x1f333;普通命令&#x1f6a9;sadd&#x1f6a9;smembers&#x1f6a9;sismember&#x1f6a9;scard&#x1f6a9;spop&#x1f6a9;smove&#x1f6a9;srem &#x1f332;集合间操作&#x1f6a9;sinter&#x1f6a9;sinterstore&#x1f6a9…

C# --- 浮点数类型 float, double, decimal

C# --- 浮点数类型 float, double, decimal float, double, decimaldecimal float, double, decimal decimal double 和 float 的采用base 2, 不能精确的表示浮点数, 进行加减乘除的操作的时候会出现精度丢失的问题decimal 采用base 10&#xff0c;可以精确的表示浮点数&#x…

客户体验:电子元器件商城配送满意度调查

背景介绍 电子元器件商城为了提升配送服务质量&#xff0c;决定开展配送满意度调查&#xff0c;以了解客户对配送服务的评价和意见。通过客户的反馈&#xff0c;商城将进一步优化配送流程&#xff0c;提高客户满意度&#xff0c;增强市场竞争力。 调查内容 配送时效性&#xf…

linux 之dma_buf (4)- mmap

一、前言 前面几篇都是在 kernel space 对 dma-buf 进行访问的&#xff0c;本篇我们将一起来学习&#xff0c;如何在 user space 访问 dma-buf。当然&#xff0c;user space 访问 dma-buf 也属于 CPU Access 的一种。 二、mmap 为了方便应用程序能直接在用户空间读写 dma-bu…

nbcio-vue升级迁移flowable到最新的jeeg-boot-vue3的问题记录(一)

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、vue3 jeeg-boot-vue3新版本的流程定义的页面&#xff0c;刷新出现下面问题&#xff0c;或第一次进去也一样 看着好像就一个警告的信息&#xff0c;不知道是什么原因引起的&#xff0c;应…

111.二叉树的最小深度

给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明: 叶子节点是指没有子节点的节点。 示例: 给定二叉树 [3,9,20,null,null,15,7], 返回它的最小深度 2. 思路&#xff1a; 后序遍历&#xff08;左右中&#xff…

深入理解 Nginx Concat 模块:示例、安装和使用方法

Nginx 是一个高性能的开源 Web 服务器,广泛用于构建可靠的 Web 应用程序和服务。其中的 Concat 模块为用户提供了在服务器端快速合并和传输多个文件的能力,从而提高了网页加载速度和性能。在本文中,我们将深入探讨 Nginx Concat 模块的安装、示例以及使用场景。 什么是 Ngi…