TS中，到底用`type`还是`interface`呢？

最新推荐文章于 2024-07-01 17:33:15 发布
最新推荐文章于 2024-07-01 17:33:15 发布
阅读量583 收藏 10
点赞数 7
分类专栏： 前端资讯 文章标签： 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Likestarr/article/details/135196001
版权

直接说结论，用type一把梭即可，除非你要发布到npm，接下来我一一解释

为什么定义对象都要使用type呢？

如图所示，我鼠标悬浮后，并不知道里面是什么东西

只能获取结果时调出代码提示，或者ctrl + 鼠标左键进入，查看类型定义

那么我用type呢？

可以看到，现在鼠标悬浮能直接查看类型定义了

这一点是让我最受不了的，所以直接选择type即可

区别

1. 如何继承

先看看interface，通过extends关键字

如果扩展时键相同，类型不同，则会报错

type，则通过交叉类型。不过我认为interface好看点

如果扩展时键相同，类型不同，并不会报错

type是否能被class实现？

没错，真的可以。说到这里，你还会去抠字眼说interface怎样怎样吧啦吧啦吗？

2. 其他特性

当interface重写时

  • 如果有不同的属性，则会添加；

  • 如果是相同的属性但是类型不同，则会报错;

这点有好有坏，当你不小心名字重复了，那你就容易出问题

但同时利于扩展，不过没有人会这么写吧？

直接去原来的接口添加属性不行吗？

唯一的场景，就是开发工具库后。别人使用你的工具时，可以为你扩展类型

3. type独有的优势

除了上面的悬浮能查看具体类型外，type还提供了很多的关键字使用，这是interface不具备的

比如in关键字，用来枚举类型

这里我写个删除属性的泛型，和Omit一样的，但是interface不支持

此外还有很多TS特有的关键字，都只能通过type使用，比如infer等

不过这也符合直觉，因为interface就是定义一个类型而已

经过以上探讨，可以得出一个结论

平时开发可以都用type

发布工具库给别人用时，用interface

Web面试那些事儿
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【TypeScript】TS中type和interface在类型声明时的区别（十二）
编码世界
04-24 9409
在TS中`interface` 和 `type`都可以用来自定义数据类型，两者有许多相同之处，但是也有差别。我们一般选择 `type` 来定义基本类型别名、联合类型、元组等类型，而选择 `interface` 来定义复杂的对象、类、以及进行接口的继承。
TS和JS，type和interface
Honey的博客
09-29 1478
概念:Ts是一个渐进式包含类型的js超集，它的作用就是为js变量提供类型支持，可以实现静态检查，高效的重构代码以及寻找bug，将js切换为基于类的面向对象的语言。最后，ts都会被编译成简单的js代码，可以使用一些js没有提供的面向对象的概念，比如说接口属性泛型。允许我们在编译的时候对代码进行错误检测和类型检测。特点：面向项目:TS - 面向解决大型的复杂项目、架构、代码维护复杂场景JS - 脚本化语言，用于面向简单页面场景自主检测:TS - 编译时，主动发现并纠正错误。
【TS】快速了解 interface 与 type 的使用方式
2024 做自己的太阳
05-17 2910
快速了解 interface 与 type 的使用方式 文章目录快速了解 interface 与 type 的使用方式1. interface 与 type 使用相同点1.1 两者都可以描述一个对象或者函数interfacetype1.2 两者都允许拓展（extends）interface extends interfacetype extends type（via intersections）interface extends typetype extends interface（via intersec
在 TypeScript 中，定义类型时你用 Types 还是 Interfaces？
前端达人
06-09 441
什么是 Types 和 Interfaces？Types 和 Interfaces 是 TypeScript 中两种用于定义数据结构的工具。它们可以帮助开发者在编写代码时约束变量和对象的类型，从而减少错误并提高代码的可读性。Types：Types 允许你定义各种类型，包括基本类型（如字符串、数字）、对象类型、联合类型、交叉类型等。它们非常灵活，可以通过组合不同的类型来创建复杂的数据结构。示例：ty...
ts语法---数据类型，interface和type的用法
最新发布
I_am_shy的博客
07-01 1317
ts的数据类型自上而下的分级有第一层 any-任意类型和unknow类型，第二层 原型链的Object类型，第三层 js类的类型第四层 标准的typescript类型第五层 对应的实例数据类型第六层 never类型这里的分层表示，上面的类型包括了下面的类型，例如，any类型在最顶层可以赋值任何数据类型，字符串，数字，对象等等。
TS中type和interface的区别
Ethereality_aron的博客
03-27 2525
2.interface可以通过“extends”来继承接口，这样既高效又不用重新定义。而type只能通过&来实现类似于继承的功能。interface：接口，TS 设计出来主要用于定义对象类型，可以对对象的形状进行描述。type：类型别名，为类型创建一个新名称。它并不是一个类型，只是一个别名。1.interface可以重复声明，type定义后不能重复声明。定义对象时严谨的来说，type 是引用，而。
聊聊TypeScript中的type和interface
weixin_57294298的博客
03-20 463
首先,看下ts官网对二者的基本定义type类型interface接口好像官网对这二者之间的定义也是十分模糊,其实本质就是为了定义和约束数据结构,保证类型的安全和数据结构的复用。
Typescript 中的 interface 和 type 到底有什么区别详解
10-16
在TypeScript中，`interface`和`type`都是用来做类型定义的，它们有相似之处，但也有明显的差异。理解这些区别对于编写高质量的TypeScript代码至关重要。 首先，`interface`和`type`都能用于描述对象类型。例如，...
Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)
qq_33911541的博客
02-28 1489
Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)
ts -type alias 和interface的区别
weixin_28750673的博客
05-18 273
ts -type alias 和interface的区别 1、继承方式 interface继承 interface Animal { name: string } interface Bear extends Animal { honey: boolean } const bear = getBear() bear.name bear.honey Type alias继承 type Animal = { name: string } type Bear = Animal & {
TS中interface和type的主要区别
weixin_44265146的博客
07-11 988
总的来说，interface和type在某些方面有相似的功能，但它们也有一些区别。一般来说，当你要描述对象的结构和行为时，优先选择使用interface，当你需要使用联合类型、交叉类型等高级类型时，或者需要给现有类型起一个别名时，可以使用type来定义类型别名。
面试官：ts中 interface和type有什么区别和异同点
青轩桃李能几何，流光欺人忽蹉跎
08-08 485
在 TypeScript 中， 和 可以用来定义对象的结构和类型。它们的区别和异同点如下： 使用 关键字定义，而 使用 关键字定义。 支持声明合并，这意味着可以多次声明同一个接口，并且它们会被合并为一个接口。而 不支持声明合并。当我们【多次声明同一个接口】时，它们【会被合并为一个接口】。下面是一个示例代码： 在上面的代码中，我们首先声明了一个 接口，包含 和 属性。然后我们又声明了一个 接口，包含 属性。这两个声明会被合并为一个接口，即最终的 接口包含了 、 和 三个属性。在实际使用
ts中type 与 interface 的区别
xia_tian666的博客
09-01 4375
ts中type 与 interface 的区别
TypeScript中interface和type关键字的作用和区别分别是什么
m0_57742630的博客
12-24 474
在 TypeScript 中都可以用来定义对象的类型，但它们有一些区别和不同的使用场景。具有声明合并的特性，意味着可以多次声明同一个接口，并且会自动将属性进行合并。对于兼容性更加宽松。当你有多个相似的接口时，它们会自动合并为一个接口。选择使用哪个取决于你的个人偏好和特定的需求。来说，如果你有多个相似的类型别名，它们是不会自动合并的。由于这些不同，通常在以下情况下，使用。：通过继承其他接口或者类型别名，需要注意的是，在大多数情况下，不支持继承其他类型。而在以下情况下，使用。
VSCode 中 TypeScript 类型提示信息失效
weixin_58487208的博客
11-24 3966
如果发现自己的vscode鼠标悬停时没有类型提示 可在设置中搜索 '提示',找到'控制是否显示悬停提示'选项, 勾上 提示就出现了
一分钟带你搞清楚ts中 interface 和 type 的概念和用法（较全）
热门推荐
黑客与画家
09-03 1万+
文章目录前言一、概念二、两者的异同1.相同点2.不同点总结 前言 提示：刚学习TS 的新手看到type 和 interface 会分不清楚什么场景下怎么使用，所以写一篇文章总结一下 一、概念 type : 类型别名 概念：可以给一个或多个数据类型（string、number、…）取一个别名； 举例： type dataType=number (给一个) type dataType=number | string | turple interface：接口 概念：定义参数或方法的数据类型； 二、两者的异
TS篇—type 和 interface 的区别
qq_42345237的博客
05-21 1万+
在 TS 中，type 和 interface相似，都可以给类型命名并通过该名字来引用表示的类型。不过它们之间是存在一些差别的，我们在使用时也需要注意一些特殊场景。 概念 type type关键字是声明类型别名的关键字。它的语法如下： type AliasName = Type; type：声明类型别名的关键字 AliasName：类型别名的名称 Type：类型别名关联的具体类型 interface 通过关键字 interface可以定义一个接口类型。它能合并众多类型声明至一个类型声明。 接口声明只存
TS中 type|interface的区别
qq_43638735的博客
03-13 1493
TS type|interface
ts中type和interface的区别
06-28
### 回答1： 在 TypeScript 中，`type` 和 `interface` 都可以用来定义类型。 `type` 主要用来给其他类型起别名，常用来简化复杂的类型定义，或者为某些类型定义别名，便于代码的阅读和维护。 `interface` 用来定义类的形状或对象的形状，用来对对象的类型进行描述，例如属性、方法。 比如： ``` type Person = {name:string,age:number} interface Person { name:string, age:number } ``` 两者定义相同,都是定义了一个名为Person类型，有两个属性name和age,都是string和number 总结：简单来说就是 type 更适合定义类型的别名，interface 更适合定义对象的形状。 ### 回答2： Type和Interface是两种在TypeScript中定义类型的方式。它们有相似的用途，但也有一些区别。 Type用于定义一个类型别名，这个别名可以代表任何类型：基本类型、对象类型、交叉类型、联合类型等等。可以使用Type来描述一个状态和行为，而不需要明确地声明这个状态和行为是什么。 Interface则更多地关注对象类型，它主要用于描述一个具体的对象的属性和方法。Interface中的属性和方法必须有明确的类型声明。它是定义对象形状的一种方式。 一个重要的区别是，Interface在声明一个对象时必须定义全部的属性和方法，而Type则可以定义一个可以部分类型。在Interface中无法使用联合类型或者交叉类型来定义属性，只能使用基本数据类型或对象类型来定义。在Type中则没有这种限制。 另一个区别是，Type可以被用于更广泛的场景，包括泛型类型、函数类型、类类型等等，而Interface主要用于描述对象类型。在使用Type的时候可以使用typeof获取类型，而Interface则不行。 总的来说，Type和Interface有相似但不完全一致的功能，使用时需要根据具体情况来选择。对于一个具体的对象类型，可以使用Interface来定义；对于一个可以复用的类型，可以使用Type来定义。 ### 回答3： 在TypeScript中，Type和Interface是两个常用的类型声明方式。虽然它们在某些方面有相似之处，但在其他方面也有区别。下面我将详细讨论它们的区别。 一、定义方式不同 Type用于定义别名，通常用于重复使用已存在类型。Type声明的方式类似于变量声明，如下： ``` type MyType = string | number; ``` 而Interface则用于定义对象的形状或结构。这种声明方式与变量声明不同，通常使用花括号包裹，并使用分号分隔属性之间，如下： ``` interface MyInterface { name: string; age: number; getId(): number; } ``` 二、实现目的不同 Type的主要功能是创建类型别名，它为现有类型创建方便、有意义的名称。Type的优势在于可以快速地定义复杂的类型，从而使代码更易于阅读和维护。值得注意的是，Type不能添加新属性或方法。 Interface的主要功能是描述对象的形状或结构，可以定义属性、方法和可选项。除此之外，Interface还可以扩展其他Interface，从而使代码更灵活，易于扩展和维护。此外，Interface还支持更多的类型，如索引签名、继承等。 三、兼容性不同 Type和Interface的兼容性也有所不同。Type和Interface可以互相赋值，因为它们本质上是相似的类型声明方式，但是在某些情况下，Type更灵活。 Type可以使用类似联合类型、交叉类型等较高级的类型操作，从而创建复杂的类型。而且Type还可以使用type assertions或者类型别名来自定义类型，达到灵活控制的效果。 Interface则需要完全匹配才能赋值成功，且它无法使用高级类型操作。因此，在某些情况下，可能需要使用Type来创建更灵活的类型定义。 综上所述，Type和Interface都是定义类型的重要方式，但它们在声明方式、实现目的和兼容性方面存在不同。开发者可以根据需求选择最适合的类型声明方式，从而提高代码的可读性、可扩展性和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web面试那些事儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值