精进TypeScript--你了解类型(type)和接口(interface)的区别吗?

要记住的事情:

  • 理解 type 和 interface 之间的异同
  • 知道如何使用其中一种语法来编写相同的类型
  • 当决定在你的项目中使用哪一种语法时,既要考虑既定的风格,也要考虑扩增是否会有好处

如果你想在 TypeScript 中定义一个命名类型,你有两种选择,使用一个类型或接口,如下:

type TState = {name: string;capital: string;
}interface IState {name: string;capital: string;
}

你应该使用哪个?你应该意识到 type 和 interface 之间的区别,并且在哪种情况下使用哪一种都要保持一致。但是,你也应该知道如何使用这两种方式来编写相同的类型,这样你就能自如地读懂使用这两种编写的 TypeScript 代码。

首先,关于相似性:State 类型之间几乎没有区别。不管你用 IState 还是 TState 定义了一个带有多余属性的值,你得到的错误是字对字相同的:

const state: TState = {name: 'China';capital: 'BeiJing';population: 5000000; // ~~ 不能将类型 ... 分配给类型 “TState”
}

你可以对 interface 和 type 使用索引签名:

type TDict = {[key: string]: string};
interface IDict {[key: string]: string;
}

你也可以用它们中的任意一个定义函数类型:

type TFn = (x: number) => string;
interface IFn {(x: number): string;
}const toStrT: TFn = x => '' + x; // OK
const toStrI: IFn = x => '' + x; // OK

对于这种直接的函数类型,类型别名看起来更自然,但如果函数类型也具有属性,那么声明看起来就更相似。

type TFnWithProperties = {(x: number): number;prop: string;
}
interface IFnWithProperties {(x: number): number;prop: string;
}

你可以通过提醒自己,在JavaScript 中,函数是可调用的对象,来记住这种语法。

类型别名和接口都可以是泛型:

type TPair<T> = {first: T;second: T;
}interface IPair<T> = {first: T;second: T;
}

interface 可以扩展 type,type 也可以扩展 interface:

interface IStateWithPop extends TState {population: number;
}
type TStateWithPop = IState & {population: number;}

同样,这两个类型都是相同的。需要注意的是,interface 不能扩展复杂的类型,如联合类型。如果你想这么做,你需要使用 type 和 &。

类(class)可以实现interface或简单类型:

class StateT implements TState {name: string = '';capital: string = '';
}
class StateI implements IState {name: string = '';capital: string = '';
}

这些是相似之处。那不同之处呢?你已经看到了一个:有联合 type,但没有联合 interface:

type A or B = 'a' | 'b';

扩展联合类型是很有用的。如果你有单独的 Input 和 Output 变量的类型,以及从名字(name)到变量的映射:

type Input = { /*...*/ };
type Output = { /*...*/ };
interface VariableMap {[name: string]: Input | Output;
}

那么你可能想要一个将名字(name)附加到变量上的类型,如:

type NamedVariable = (Input | Output) & {name: string};

这个类型无法用 interface 来表达。一般来说,type 比 interface 能力更强。类型可以是一个联合类型,也可以利用更高级的特性,如映射类型(mapped)和条件类型(conditional)。

它还可以更容易地表达元组和数组类型:

type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];

你可以用 interface 来表达类似元组的东西:

interface Tuple {0: number;1: number;length: 2;
}
const t: Tuple = [10, 20]; // OK

但这很笨拙,而且放弃了所有的元组方法,如 concat,所以最好使用 type。

不过,interface 确实有一些 type 没有的能力。其中之一就是 interface 可以被扩增。比如:

interface IState {name: string;capital: string;
}
interface IState {population: number;
}
const state: IState = {name: 'China';capital: 'BeiJing';population: 5000000;
}; // OK

这就是所谓的 “声明合并” ,如果你从来没见过这种写法,它会让你很惊讶。它主要用于类型声明文件,如果你正在编写一个类型声明文件,你就应该遵循该规范,并使用 interface 来支持它。这样做,是因为你的类型声明中可能会缺少一些需要用户补充的属性,这时候用户就会使用声明合并。

对于没有既定风格的项目,你应该考虑扩增。你是否在为一个 API 发布类型声明?如果 API 发生变化时,能够通过 interface 合并新的字段可能对你的用户有帮助,那就使用 interface。但是,对于一个在你项目内部使用的类型,声明合并可能是一个错误,那就倾向于使用 type。

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

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

相关文章

力扣2684---矩阵中移动的最大次数(DFS,Java、中等题)

目录 题目描述&#xff1a; 思路描述&#xff1a; 代码&#xff1a; 纯递归&#xff1a; 带有记忆化搜索的递归&#xff1a; 题目描述&#xff1a; 给你一个下标从 0 开始、大小为 m x n 的矩阵 grid &#xff0c;矩阵由若干 正 整数组成。 你可以从矩阵第一列中的 任一 单…

科锐国际(计算机类),快手,CVTE,得物,蓝禾,奇安信,顺丰,康冠科技,金证科技24春招内推

科锐国际&#xff08;计算机类&#xff09;&#xff0c;快手&#xff0c;CVTE&#xff0c;得物&#xff0c;蓝禾&#xff0c;奇安信&#xff0c;顺丰&#xff0c;康冠科技&#xff0c;金证科技24春招内推 ①得物 【岗位】技术&#xff0c;设计&#xff0c;供应链&#xff0c;风…

基于ZooKeeper的Kafka分布式集群搭建与集群启动停止Shell脚本

下载Kafka压缩包 下方是Kafka官网下载地址&#xff0c;本文使用Kafka 3.0.0在虚拟机环境中搭建分布式集群。 Apache Kafka Downloads link 虽然在Kafka 2.8.0之后可以使用KRaft模式搭建高可用的集群以提高数据处理效率&#xff0c;但是目前还有许多企业依然使用ZooKeeper搭建K…

Linux驱动学习:从Linux主机nfs共享文件到uboot

第一步&#xff1a;在Linux主机上开启NFS服务&#xff0c;使用如下命令安装NFS服务&#xff1a; sudo apt-get install nfs-kernel-server rpcbind 第二步&#xff1a;创建一个文件夹用于共享&#xff0c;直接以nfs命名就行&#xff1a; 第三步&#xff1a;打开nfs服务配置文…

UD浏览器多线程支持的设置

目前有很多人使用python chrom driver 的组合来进行爬虫&#xff0c;默认的官方配置&#xff0c;会被很多网站检测&#xff0c;所以&#xff0c;也产生了不少修改版本。UD 浏览器就是其中的代表。虽然他不百分百过检测&#xff0c;但是比很多官方版本的默认配置要好多的。 …

go库x/text缺陷报告CVE-2022-32149的处理方案

#问题描述 go库 golang.org/x/text &#xff0c;注意这里不是go的源码&#xff0c; 在0.3.8版本之前存在一个缺陷(Vulnerability) 缺陷ID CVE-2022-32149 具体描述 攻击者可以通过制作一个Accept-Language报头来导致拒绝服务。 具体的原因是&#xff0c;在解析这个Accept-L…

CSS3新增的语法(三)【2D,3D,过渡,动画】

CSS3新增的语法&#xff08;三&#xff09;【2D,3D,过渡&#xff0c;动画】 10.2D变换10.1. 2D位移10.2. 2D缩放10.3. 2D旋转10.4. 2D扭曲&#xff08;了解&#xff09;10.5. 多重变换10.6. 变换原点 11. 3D变换11.1. 开启3D空间11.2. 设置景深11.3. 透视点位置11.4. 3D 位移11…

汽车电子行业知识:什么是汽车协议栈

汽车协议栈是一种软件架构&#xff0c;用于在汽车电子系统中实现不同设备之间的通信。它通常由多个协议层组成&#xff0c;每个协议层负责处理特定的通信功能。汽车协议栈可以支持多种通信协议。 汽车传感器通常使用的协议栈包括以下几种&#xff1a; SPI (Serial Peripheral…

反截屏控制技术如何防止信息通过手机拍照泄漏?

反截屏控制技术为企业数据安全提供了重要的防护措施。通过以下几点&#xff0c;有效阻止了信息通过拍照等方式的泄漏&#xff1a; 反截屏控制开启&#xff0c;用户启动截屏操作时&#xff0c;允许非涉密内容截屏操作&#xff0c;但所有涉密内容窗口会自动隐藏&#xff0c;防止涉…

Spark-Scala语言实战(11)

在之前的文章中&#xff0c;我们学习了如何在spark中使用RDD中的cartesian,subtract最终两种方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scal…

2023最新汽车网络安全报告汇总

2023最新汽车网络安全报告、安全参考架构及指南汇总&#xff0c;供大家学习参考。https://t.zsxq.com/18RkG260k 汽车信息安全法律法规及标准全景图V3.2.pdf 车载智能计算基础平台参考架构2.0.pdf 车载智能计算芯片白皮书(2023版).pdf 智能驾驶行为安全评价方法发布版.pdf 智能…

【Next.js】连接 MongoDB 实现基本的接口

【Next.js】连接 MongoDB 实现基本的接口 什么是 MongoDB MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解…

填谷式无源PFC电路

目录&#xff1a; 1、概述 2、原理 1、概述 如果不采用PFC&#xff0c;那么典型开关模式电源的功率因数约为0.6&#xff0c;因而会有相当大的奇次谐波失真(第三谐波有时和基本谐波一样大)。令功率因数小于1以及来自峰值负载的谐波减少了运行设备可用的实际功率。为运行这些低…

数据结构——二叉树(堆)

大家好我是小峰&#xff0c;今天我们开始学习二叉树。 首先我们来学习什么是树&#xff1f; 树概念及结构 树是一种 非线性 的数据结构&#xff0c;它是由 n &#xff08; n>0 &#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因 为它看起来像一棵倒挂的…

acwing算法提高之图论--SPFA找负环

目录 1 介绍2 训练 1 介绍 本专题用来记录使用spfa算法来求负环的题目。 2 训练 题目1&#xff1a;904虫洞 C代码如下&#xff0c; #include <cstring> #include <iostream> #include <algorithm> #include <queue>using namespace std;typedef p…

C、C++、C#中.vscode下json文件记录

C launch.json {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.microsoft.com/fwlink/?linkid830387"version": "0.2.0","configurations": [{"name": &quo…

【2024红明谷】三道Web题目的记录

红明谷 文章目录 红明谷Web1 | SOLVED LaterWeb2 | UNSOLVEDWeb3 | SOLVED 容器已经关咯&#xff0c;所以有些场景只能靠回忆描述啦&#xff0c;学习为主&#xff0c;题目只是一个载体~ 本次比赛学习为主&#xff0c;确实再一次感受到久违的web题目的魅力了&#xff0c;可能也是…

数据转换 | Matlab基于GASF格拉姆角和场一维数据转二维图像方法

目录 效果分析基本介绍程序设计参考资料获取方式 效果分析 基本介绍 基于GASF&#xff08;Gramian Angular Summation Field&#xff09;的方法&#xff0c;将一维数据转换为二维图像的步骤描述 标准化数据&#xff1a; 首先&#xff0c;对一维时序数据进行标准化处理&#xf…

java八股——linux常见命令

上一篇传送门&#xff1a; 点我 说说你知道的linux命令&#xff1f; 1.ls&#xff1a;列出目录内容。 示例&#xff1a;ls -l&#xff08;以长格式显示目录内容&#xff0c;可以缩写成ll&#xff09;&#xff0c;ls -a&#xff08;显示包括隐藏文件在内的所有文件&#xff09…

Python如何下载视频

大家好&#xff0c;今天我将为大家介绍如何使用Python来下载视频。Python作为一门强大的编程语言&#xff0c;不仅可以用于数据分析、机器学习等领域&#xff0c;还能用于网络爬虫和视频下载等任务。下面我将详细介绍如何使用Python来下载视频。 首先&#xff0c;我们需要明确…