type 与 interface

article/2025/9/25 12:26:32

type 与 interface

官方文档是这么说的:

For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type.

大多数情况下,你可以根据个人偏好进行选择,TS 会告诉你是否它是否需要额外的信息去改成另一个声明。如果你想要一个启发式:

使用 interface 一直到你需要使用 type 的一些特性。

所以,如果不是项目有额外的规范的话,一般情况下可以使用 inrerface 就够了。

type

一个 type alias 的定义就是:一个任何类型的名字 (a name for any type),其语法如下:

type Point = {x: number;y: number;
};// Exactly the same as the earlier example
function printCoord(pt: Point) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}printCoord({ x: 100, y: 100 });

除了基础的使用之外,type 还有这几个 interface 不具备的特性:

  1. 可声明基础型

    type primitiveType = string;
    

    而 interface 因为语法问题,当其被进行声明时,已经是一个对象结构。

    同理可推,type 也可以用来声明 tuple——毕竟 tuple 从结构上来说不是一个对象。

  2. 可声明 union 类型

    type type1 = {x: number;
    };
    type type2 = {y: number;
    };type unionType = type1 | type2;
    

    这时对 unionType 的断言为 {x: 1} 或是 {y:1.11},如出现其他的类型则会报错:

    在这里插入图片描述

    其实这样的功能对于 primitive 的生命比较有用,interface 也可以使用 optional 选项进行实现。

  3. 可以用计算式

    这是在看另一个项目组的项目时碰到的写法,当时第一个感觉就是……woc 牛逼啊,可太省事情了:

    在这里插入图片描述

    可惜 interface 没法使用这个操作。

  4. 创建后无法被修改

    也就比较像是 Object.freeze() 这种实现吧。

    type Window = {title: string;
    };type Window = {ts: TypeScriptAPI;
    };// Error: Duplicate identifier 'Window'.
    

除此之外,type 的扩展方式使用 & 符号,如:

type Animal = {name: string;
};type Bear = Animal & {honey: boolean;
};const bear = getBear();
bear.name;
bear.honey;

interface

一个 nterface declaration 的定义就是:另一个命名对象类型的方式 (another way to name an object type),其语法如下:

interface Point {x: number;y: number;
}function printCoord(pt: Point) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}printCoord({ x: 100, y: 100 });

可以看到,和使用 type 没什么特别大的区别,这也就是 TS 官方说,先用 interface,遇到 interface 没法满足的功能再使用 type 的原因。

interface 的扩展方式如下:

interface Animal {name: string;
}interface Bear extends Animal {honey: boolean;
}const bear = getBear();
bear.name;
bear.honey;

与 type 的对比就是,interface 更加的动态,也就是说如果新建一个变量名相同的 interface,TS 会自动对其进行扩展,如:

interface Window {title: string;
}interface Window {ts: TypeScriptAPI;
}const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

总结

TS 的官方推荐是一直使用 interface 一直到 interface 无法满足对 type 的需求,个人看别的项目的感觉是,对于大部分的 data definition(不可变的数据类型,需要传进对象的参数)应该使用 type,其他的情况可以使用 interface。

另外 TS 中的实现还挺乱的,比如说彼此扩展这种事情都是可以实现的:

在这里插入图片描述

所以规范化的执行是最重要的事情。


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

相关文章

TypeScript中type和interface区别

typescript中interface介绍:TypeScript 中的接口 interface_疆~的博客-CSDN博客通常使用接口(Interface)来定义对象的类型。https://blog.csdn.net/qq_40323256/article/details/128478749 type type关键字是声明类型别名的关键字。用来给一…

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

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

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

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

Android 之 Paint API —— Typeface (字型)

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

Pycham_python 安装 gherkin

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

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

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

机器学习框架Chainer学习

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

Jenkins - Hello World

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

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

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

【Jenkins】【Jenkins 使用】Jenkins 与 Git

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

SSH and GPG keys

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

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

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

【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,再或者同源基因等信息,KEGG数据库也算是目前(注释)常用的明星数据库 KEGG:京都基因和基因组百科全书:KEGG项目于1995年5月在日本…

【Jenkins基础知识学习笔记】

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

Gherkin语法详解之Scenario outline(四)

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

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为分布式链路调用监控系统,聚合各业务系统调用延迟数据,达到链路调用监控跟踪。 architecture 如图,在复杂的调用链路中假设存在一条调用链路响应缓慢,如何定位其中延迟高的服务呢? 日志: 通…

Cucumber之二Gherkin语言学习

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