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

server/2024/9/22 23:48:15/

一、用法举例

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 的types.html#:~:text=name%E7%9A%84%E7%B1%BB%E5%9E%8B%E3%80%82-,%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D,-%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D%E4%BC%9A" rel="nofollow">官方文档:

interface__24">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);
type__38">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 Person { name: string 
}
interface Student extends Person { grade: number 
}const person:Student = {name: 'lin',grade: 100
}
type Person = { name: string 
}
type Student = Person & { grade: number  }    // 用交叉类型
type Person = { name: string 
}
interface Student extends Person { grade: number 
}
interface Person { name: string 
}type Student = Person & { grade: number  }    // 用交叉类型

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

四、两者不同点

type_interface__124">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' }
]
interfacetype__151">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
}

五、小结

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

http://www.ppmy.cn/server/43412.html

相关文章

Star CCM+绘图显示设置

前言 如前文介绍,根据报告创建监视器与绘图后,在绘图中会出现报告绘图。此处可以自定义绘图的格式,如网格显示、字体大小、曲线的粗细等。同时也可以根据需要创建右坐标,分别监测不同类型的函数数值。为此方便后期输出仿真报告。…

1.6 分组延时,丢失和吞吐量

分组丢失和延时是怎样发生的? 在路由器缓冲区的分组队列  分组到达链路的速率超过了链路输出的能力  分组等待排到队头、被传输 分组排队,传输分组(延时) 分组到达路由器,没有可用的队列,则该分组被丢…

一文掌握Java中的CyclicBarrier、CountDownLatch和Semaphore

1.CountDownLatch 1.1 介绍和用途 CountDownLatch 是一个同步助手类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待。 1.2 工作原理 它通过一个计数器来实现,我们初始化 CountDownLatch 对象时指定计数器的值&am…

【算法】位运算——常见位运算基础操作总结

位运算基础操作总结,包括基础运算符 修改某位bit位 目录 1.基础位运算符2.按位基础操作1.给一个数 n,确定其二进制的第 x 位是 0/12.将一个数 n 的二进制标识的第 x 位修改成 13.将一个数 n 的二进制标识的第 x 位修改成 04.提取一个数 n 二进制中最右侧…

HTML静态网页成品作业(HTML+CSS)——川西旅游介绍网页(2个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有2个页面。 二、作品演示 三、代…

openLayers加载wms图层并定位到该图层

openLayers定位到wms图层 我们的wms是加载geoserver发布的服务,wms加载的图层是没法通过layer.getSource().getExtent()来获取到extents(边界)的;实现思路是通过postgis的函数(st_extent(geom))来获取extents; 返回前端后格式化一…

前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术

前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术 一、起点:URL的奥秘与浏览器的使命1. URL解构2. 浏览器的启动步骤 二、HTML的旅行:请求与接收1. HTTP/HTTPS请求2. 响应与下载 三、构建DOM:HTML的解析与构建1. 解析HT…

羊毛纤维直径检测 — C++

羊毛纤维检测 系统是 Ubuntu20.04 。 需要用到 OpenCV 的库,库具体该怎么编译配置,可以参考网上的教程。 自己码的一小段函数,用纯 CV 的方式处理羊毛纤维图像,如图所示: 在 wool 下面,创建 build 文件…