TypeScript中type和interface的区别及注意事项

目录

• 前言
• 概念
• type
• interface
• 异同点
• 不同点
• 相同点
• 补充：Ts中type和interface定义类型扩展类型的方法
• 总结

前言

在 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。

到此这篇关于TypeScript中type和interface区别及注意事项的文章就介绍到这了,更多相关TS type和interface区别内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！