在 TS 中，type 和 interface相似，都可以给类型命名并通过该名字来引用表示的类型。不过它们之间是存在一些差别的，我们在使用时也需要注意一些特殊场景。

概念

type

type关键字是声明类型别名的关键字。它的语法如下：

type AliasName = Type;

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

interface

通过关键字 interface可以定义一个接口类型。它能合并众多类型声明至一个类型声明。

接口声明只存在于编译阶段，在编译后生成的 JS 代码中不包含任何接口代码。

语法如下：

interface InterfaceName {
  TypeMember;
  TypeMember;
  ...
}

• interface：定义接口的关键字
• InterfaceName：接口名，首字母需要大写
• TypeMember：接口的类型成员

异同点

不同点

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

好多文章里都说 type 也支持继承，但是我认为这种说法不严谨。对于类型别名来说，它可以借助交叉类型来实现继承的效果。而且这种方法也只适用于表示对象类型的类型别名，对于非对象类型是无法使用的。

type Shape = { name: string }

type Circle = Shape & { radius: number }

function foo(circle: Circle) {
  const name = circle.name
  const radius = circle.radius
}

interface接口名总是会直接显示在编译器的诊断信息和代码编辑器的智能提示中，而 type 的名字只在特定情况下才会显示出来——只有当类型别名表示数组类型、元组类型以及类或者接口的泛型实例类型时才展示。

type NumericType = number | bigint;

interface Circle {
  radius: number;
}

function f(value: NumericType, circle: Circle) {
  const bar: boolean = value;
  //    ~~~
  // 	  Type 'number | bigint' is not assignable to type 'boolean'
  // 		这里没有显示类型别名
  
  const baz: boolean = circle;
  // 	  ~~~
  // 		Type 'Circle' is not assignable to type 'boolean'
}

• interface具有声明合并的行为，而 type不会，这也意味着我们可以通过声明合并的方式给 interface定义的类型进行属性扩展。
• type可以通过 typeof来获取实例的类型从而进行赋值操作

相同点

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

补充：Ts中type和interface定义类型扩展类型的方法

1、在Ts中，我们可以通过type和interface的方式去定义类型，一般情况下通过interface接口的方法定义的类型都可以通过type去定义。注意type要添加等号。Interface定义类型不需要添加等号。

下面代码是用type声明一个string类型的例子

type user=string
//接收一个字符串类型的数据，返回一个user类型(字符串类型)的数据
function Input(str:string):user{
    return str.slice(0,2)
}
//把返回结果赋值给userInput
let userInput=Input('hello')
//重新给其赋值一个字符串类型的值,没有报错,说明用type声明的字符串类型生效
userInput='new'

下面代码是用interface声明一个对象类型的例子

interface Point{
    x:number,
    y:number
}
//接收一个Point的对象类型数据
function printCoord(pt:Point){
 
}
//给函数传一个对象类型的数据，没有报错,说明用interface声明的类型生效
printCoord({
    x:100,
    y:100
})

2、 Interface扩展接口：可以在interface后面添加关键字extends去扩展接口。类型别名type需要使用&符号去扩展接口

下面代码是用extends扩展接口的例子

//扩展接口
interface Animal{
    name:string
}
interface Bear extends Animal{
    honey:boolean
}
//声明一个类型为Bear类型的对象，要求既要有name，也要有honey。说明用extends扩展接口成功
const bear:Bear={
    name:'winie',
    honey:true
}
console.log(bear.name);
console.log(bear.honey);

 下面代码是用type扩展接口的例子

//扩展类型
type Animal={
    name:string
}
//给Animal扩展接口
type Bear=Animal&{
    honey:boolean
}
const bear:Bear={
    name:'winie',
    honey:true
}

3、向现有类型添加新字段，interface可以通过定义同名的方式去扩展字段，类型别名type是不能通过同名的方式去进行扩展的。

下面代码是interface通过定义同名的方式向现有类型添加新字段

//向现有的类型添加新字段
interface MyWindow{
    title:string
}
interface MyWindow{
    count:number
}
const w:MyWindow={
    title:'wz',
    count:666
}

 下面代码会报错，因为类型别名type是不能通过同名的方式去进行扩展的。

//类型创建后不能更改
type MyWindow={
    title:string
}
type MyWindow={
 
}

总结

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

type FType = boolean | string | number;

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

所以在对于对象结构的类型定义上，建议尽可能的使用 interface，而在合适的场景使用 type。

到此，关于“type和interface的异同点有哪些，如何使用”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 微信小程序播放音频的实现代码是什么

  这篇文章主要为大家详细介绍了微信小程序实现播放音频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Cocos项目中有哪些使用的开发技巧

  这篇文章主要介绍“Cocos项目中有哪些使用的开发技巧”，有一些人在Cocos项目中有哪些使用的开发技巧的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

• JS如何实现一个简易在线时钟？教你两个方法

  JS如何实现一个简易在线时钟？在实际的项目中，有时候我们需要实现网页在线时钟的功能，那么用JavaScript怎么编写代码呢？对此，本文分享两个方法供大家参考，感兴趣的朋友可以了解看看，接下来就跟随小编学习一下吧。

• elementUi的下拉框如何取得的el-select值和标签

  这篇文章主要介绍了vue之elementUi的el-select同时获取value和label的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• utf8编码算法是什么样的，如何实现？

  utf8编码算法是什么样的，如何实现？小编这就来给大家分析分析下，对此感兴趣的话可以看看以下知识点，有需要的朋友一定不要错过了。