TypeScript中type和interface区别

article/2025/9/25 12:27:59

typescript中interface介绍:TypeScript 中的接口 interface_疆~的博客-CSDN博客通常使用接口(Interface)来定义对象的类型。https://blog.csdn.net/qq_40323256/article/details/128478749

type

type关键字是声明类型别名的关键字。用来给一个类型起新名字,使用 type 创建类型别名。类型别名不仅可以用来表示基本类型,还可以用来表示对象类型、联合类型、元组和交集。它的语法如下:

type AliasName = Type;
  • type:声明类型别名的关键字
  • AliasName:类型别名的名称
  • Type:类型别名关联的具体类型

 

type MyNumber = number //基本类型
type StringOrNumber = string | number //联合类型
type Text1 = string | string[] //联合类型
type Point = [number, string] //元组
type Callback = (data: string) => void //函数类型
// 对象类型
type Person = {age: number;gender: string;isWebDev: boolean;id: MyNumber; // 可以使用定义类型name: StringOrNumber;
};
// 范型
type Tree<T> = { value: T };

 多个type情况:

type TPerson1 = {name: string
}
type TPerson2 = {age: number
}
type TPerson = TPerson1 & TPerson2let u: TPerson = { name: '张三', age: 23 }

 

相同点

都可以用来定义 对象 或者 函数 的结构,而严谨的来说,type 是引用,而 interface是定义 

1、都可以用来定义对象和函数

type:

type TPosition = {x: number;y: number;
};type TSetPosition = (x: number, y: number) => void;

 interface:

interface IPosition {x: number;y: number;
}interface ISetPosition {(x: number, y: number): void;
}

 2、都可以实现继承

type 可以继承 interface,interface也可以继承type,只是在实现形式上,稍微有些区别。

对于 interface 来说,继承是通过 extends 实现的;而 type 是通过 & 来实现的,也可以叫做交叉类型。 

type:

// type 继承 type
type TPerson = {name: string
}type Student = TPerson & { stuId: number }// type 继承 interface
interface IPerson {name: string
}type Student2 = IPerson & { stuId: number }

 interface:

// interface 继承 interface
interface IPerson {name: string
}interface IStudent extends IPerson { stuId: number }// interface 继承 type
type TPerson = {name: string
}interface IStudent extends TPerson { stuId: number }

 不同点:

  • type 在声明类型别名之后实际上是一个赋值操作,它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型,它只是给已有类型命名并直接进行引用。interface定义了一个接口类型。
  • type 能够表示非对象类型, 而 interface 则只能表示对象类型

 

1、type 可以做到而 interface 不能做到

type 可以声明基本类型、联合类型、元组类型

type MyNumber = number //基本类型
type StringOrNumber = string | number //联合类型
type Text1 = string | string[] //联合类型
type Point = [number, string] //元组

2、interface 可以做到而 type 不能做到

interface 可以声明合并。而 type 的话,就会报重复定义的警告,因此type是无法实现声明合并

// interface 可以声明合并
interface IPerson {name: string
}
interface IPerson {age: number
}
let p: IPerson = { name: '张三', age: 23 }// type 不可以声明合并
type TPerson = {name: string
}
type TPerson = {age: number
}
let u: TPerson = { name: '张三', age: 23 }

 

 

 总结

对于 type来说,更多的是对类型的一种复用,比如在项目中需要用到一些比较复杂的或者书写起来很长的类型,我们可以使用 type来直接引用该类型:

type FType = boolean | string | number;

而对于 interface来说,它是正儿八经的用来定义接口类型(约束数类型和属性)的,且接口类型是支持继承和声明合并的。

所以在对于对象结构的类型定义上,建议尽可能的使用 interface,而在合适的场景使用 type
一些使用场景
1、使用type的场景:

  • 定义基本类型的别名时,使用 type
  • 定义元组类型时,使用 type
  • 定义函数类型时,使用 type
  • 定义联合类型时,使用 type
  • 定义映射类型时,使用 type

2、使用interface的场景:

  • 需要利用接口自定合并特性的时候,使用 interface
  • 定义对象类型且无需使用 type 的时候,使用 interface
     

http://chatgpt.dhexx.cn/article/NYMPxQg7.shtml

相关文章

TypeScript中interface 与 type的区别,你真的懂吗?

在写 ts 相关代码的过程中&#xff0c;总能看到 interface 和 type 的身影。它们的作用好像都一样的&#xff0c;相同的功能用哪一个都可以实现&#xff0c;也都很好用&#xff0c;所以也很少去真正的理解它们之间到底有啥区别&#xff0c; 分别在什么场景下使用&#xff0c;将…

Android 设置字体的三种方法(TypeFace)

http://blog.csdn.net/legend12300/article/details/69875816 Android系统默认字体支持四种字体&#xff0c;分别为&#xff1a; noraml &#xff08;普通字体,系统默认使用的字体&#xff09;sans&#xff08;非衬线字体&#xff09;serif &#xff08;衬线字体&#xff09;…

Android 之 Paint API —— Typeface (字型)

本节带来Paint API系列的最后一个API&#xff0c;Typeface(字型)&#xff0c;由字义&#xff0c;我们大概可以猜到&#xff0c;这个 API是用来设置字体以及字体风格的&#xff0c;使用起来也非常的简单&#xff01;下面我们来学习下Typeface的一些相关 的用法&#xff01; 官方…

Pycham_python 安装 gherkin

1.File>Settings>Plusings> 在MarketPlace标签下&#xff0c;搜索gherkin&#xff0c;选择如下图所示&#xff0c;点击Install&#xff0c;安装成功后重启pycharm即可 2&#xff0c;打开feature文件&#xff0c;就会有格式显示了 转载于:https://www.cnblogs.com/aide…

学Selenium自动化需要知道的之Python测试框架

根据StackoverFlow网站的开发者调查&#xff0c;Python是2019年增长最快的编程语言。在整体排名中&#xff0c;它甚至超越了Java&#xff0c;排在第二位&#xff0c;成为最受喜爱的编程语言之一。 Python流行的几个原因之一是对测试自动化框架的广泛支持。大多数流行的Python框…

机器学习框架Chainer学习

chainer优势——边定义边运行 当下已有的深度学习框架使用的是“定义后运行”机制。即意味着&#xff0c;首先定义并且固化一个网络&#xff0c;再周而复始地馈入小批量数据进行训练。由于网络是在任何前向、反向计算前静态定义的&#xff0c;所有的逻辑作为数据必须事先嵌入网…

Jenkins - Hello World

开始 Jenkins 的第一行代码 无论学哪种语言&#xff0c;都是从 hello world 开始&#xff0c;因为这个学会了&#xff0c;就说明你已经从入门到精通了。 让我们来看看 Jenkins 的 hello world 吧 0. 登录 Jenkins 1. 新建 item 2. 创建一个 Freestyle project 3. 增加执行命令…

Cucumber--基于vue前端的自动化测试(四)

cucumber是BDD (Behavior-driven development&#xff0c;行为驱动开发)的一个自动化测试的副产品。它使用自然语言来描述测试&#xff0c;使得非程序员可以理解他们。Gherkin是这种自然语言测试的简单语法&#xff0c;而Cucumber是可以执行它们的工具。 cucumber本质上是使用根…

【Jenkins】【Jenkins 使用】Jenkins 与 Git

【文章末尾给大家留下了大量的福利】 1、概述 Jenkins 与 Git 的结合使用&#xff0c;可以理解为是 Jenkins 的一个强大之处。为什么要这么说&#xff0c;简要说明一下这个工作模式就能理解&#xff1a; 一个软件项目&#xff0c;开发过程中通常都会使用到一些源码管理工具&am…

SSH and GPG keys

问题&#xff1a;gitgithub.com: Permission denied (publickey). fatal: Could not read from remote repository. gitgithub.com&#xff1a;权限被拒绝&#xff08;publickey&#xff09;。 我相信很多程序员开始都会对Git比较陌生。但是用过几次&#xff0c;就会觉得Git的功…

自动化测试工具Cucumber的简单介绍

背景介绍 随着测试的发展&#xff0c;测试自动化越来越成为人们的关注点。 现在我们公司也在进行接口自动化的推广&#xff0c;在我看来接口自动化的价值就在于整体项目的回归&#xff0c;完成一些没法通过人力进行的测试&#xff0c;比如压力测试。 为了解决测试开发人员和…

【Jenkins】学习笔记

学习笔记 一、Jenkins1.1、Jenkins的作用 二、下载安装2.1、安装环境2.2、安装GitLab2.3、安装Jenkins 三、Jenkins Git Maven 部署配置3.1、安装maven插件3.2、新建项目3.3、自动发布到测试服务器 四、publish over ssh 配置4.1、超时机制4.2、shell的日志输出4.3、运行前清…

快速了解KEGG

我们有时候很关心基因所在的pathway、上下调控以及一堆基因富集到的pathway&#xff0c;再或者同源基因等信息&#xff0c;KEGG数据库也算是目前&#xff08;注释&#xff09;常用的明星数据库 KEGG&#xff1a;京都基因和基因组百科全书&#xff1a;KEGG项目于1995年5月在日本…

【Jenkins基础知识学习笔记】

文章目录 1、Master/Slave架构2、搭建步骤3、工作流程4、配置建议5、通信方式参考文档 1、Master/Slave架构 Jenkins采用Master/Slave架构&#xff0c;Master/Slave相当于Server和agent的概念&#xff0c;Master提供web接口让用户来管理Job和Slave&#xff0c;Job可以运行在Ma…

Gherkin语法详解之Scenario outline(四)

如果我想要对于不同的数据集&#xff0c;重复一个场景的所有步骤?这是一个数据驱动测试的经典案例。这将通过使用一个场景大纲来实现

BDD - BDD Automation Framwork 自动化框架

BDD - BDD Automation Framwork 自动化框架 引言BDD 测试框架Jenkins 集成Framework Components 框架组件IDEs 集成开发环境NotepadEclipseJetBrains IntelliJ IDEAMicrosoft Visual Studio 引言 BDD 自动化框架使得 QA 工程师很容易将 Gherkin Scenarios 转换成自动化测试用例…

zipkin

zipkin zipkin为分布式链路调用监控系统&#xff0c;聚合各业务系统调用延迟数据&#xff0c;达到链路调用监控跟踪。 architecture 如图&#xff0c;在复杂的调用链路中假设存在一条调用链路响应缓慢&#xff0c;如何定位其中延迟高的服务呢&#xff1f; 日志&#xff1a; 通…

Cucumber之二Gherkin语言学习

在本教程中&#xff0c;我们将向您介绍Gherkin - BDD语言(业务驱动开发)。我们将尽力详细回答这些问题原文点击这里 免费英语视频教程可见微信公众号&#xff1a;【软测小生】里面&#xff0c;请关注公号更新相关文章和视频资源。 另外有一个中国团队在做类似的事情&#…

Artifactory 简介

产品特点 http://www.jfrogchina.com/artifactory/features/ 产品对比 https://binary-repositories-comparison.github.io/