前言

在 TS 中，type 和 interface相似，都可以給類型命名并通過該名字來引用表示的類型。不過它們之間是存在一些差別的，我們?cè)谑褂脮r(shí)也需要注意一些特殊場(chǎng)景。

概念

type

type關(guān)鍵字是聲明類型別名的關(guān)鍵字。它的語法如下：

type AliasName = Type;

• type：聲明類型別名的關(guān)鍵字
• AliasName：類型別名的名稱
• Type：類型別名關(guān)聯(lián)的具體類型

interface

通過關(guān)鍵字 interface可以定義一個(gè)接口類型。它能合并眾多類型聲明至一個(gè)類型聲明。

接口聲明只存在于編譯階段，在編譯后生成的 JS 代碼中不包含任何接口代碼。

語法如下：

interface InterfaceName {
  TypeMember;
  TypeMember;
  ...
}

• interface：定義接口的關(guān)鍵字
• InterfaceName：接口名，首字母需要大寫
• TypeMember：接口的類型成員

異同點(diǎn)

不同點(diǎn)

• type 在聲明類型別名之后實(shí)際上是一個(gè)賦值操作，它需要將別名與類型關(guān)聯(lián)起來。也就是說類型別名不會(huì)創(chuàng)建出一種新的類型，它只是給已有類型命名并直接進(jìn)行引用。interface是定義了一個(gè)接口類型。
• type 能夠表示非對(duì)象類型， 而 interface 則只能表示對(duì)象類型。
• interface可以繼承其他的接口、類等對(duì)象類型， type 不支持繼承。

好多文章里都說 type 也支持繼承，但是我認(rèn)為這種說法不嚴(yán)謹(jǐn)。對(duì)于類型別名來說，它可以借助交叉類型來實(shí)現(xiàn)繼承的效果。而且這種方法也只適用于表示對(duì)象類型的類型別名，對(duì)于非對(duì)象類型是無法使用的。

type Shape = { name: string }

type Circle = Shape & { radius: number }

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

interface接口名總是會(huì)直接顯示在編譯器的診斷信息和代碼編輯器的智能提示中，而 type 的名字只在特定情況下才會(huì)顯示出來——只有當(dāng)類型別名表示數(shù)組類型、元組類型以及類或者接口的泛型實(shí)例類型時(shí)才展示。

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不會(huì)，這也意味著我們可以通過聲明合并的方式給 interface定義的類型進(jìn)行屬性擴(kuò)展。
• type可以通過 typeof來獲取實(shí)例的類型從而進(jìn)行賦值操作

相同點(diǎn)

都可以用來定義 對(duì)象 或者 函數(shù) 的結(jié)構(gòu)，而嚴(yán)謹(jǐn)?shù)膩碚f，type 是引用，而 interface是定義。

補(bǔ)充：Ts中type和interface定義類型擴(kuò)展類型的方法

1、在Ts中，我們可以通過type和interface的方式去定義類型，一般情況下通過interface接口的方法定義的類型都可以通過type去定義。注意type要添加等號(hào)。Interface定義類型不需要添加等號(hào)。

下面代碼是用type聲明一個(gè)string類型的例子

type user=string
//接收一個(gè)字符串類型的數(shù)據(jù)，返回一個(gè)user類型(字符串類型)的數(shù)據(jù)
function Input(str:string):user{
    return str.slice(0,2)
}
//把返回結(jié)果賦值給userInput
let userInput=Input('hello')
//重新給其賦值一個(gè)字符串類型的值,沒有報(bào)錯(cuò),說明用type聲明的字符串類型生效
userInput='new'

下面代碼是用interface聲明一個(gè)對(duì)象類型的例子

interface Point{
    x:number,
    y:number
}
//接收一個(gè)Point的對(duì)象類型數(shù)據(jù)
function printCoord(pt:Point){
 
}
//給函數(shù)傳一個(gè)對(duì)象類型的數(shù)據(jù)，沒有報(bào)錯(cuò),說明用interface聲明的類型生效
printCoord({
    x:100,
    y:100
})

2、 Interface擴(kuò)展接口：可以在interface后面添加關(guān)鍵字extends去擴(kuò)展接口。類型別名type需要使用&符號(hào)去擴(kuò)展接口

下面代碼是用extends擴(kuò)展接口的例子

//擴(kuò)展接口
interface Animal{
    name:string
}
interface Bear extends Animal{
    honey:boolean
}
//聲明一個(gè)類型為Bear類型的對(duì)象，要求既要有name，也要有honey。說明用extends擴(kuò)展接口成功
const bear:Bear={
    name:'winie',
    honey:true
}
console.log(bear.name);
console.log(bear.honey);

 下面代碼是用type擴(kuò)展接口的例子

//擴(kuò)展類型
type Animal={
    name:string
}
//給Animal擴(kuò)展接口
type Bear=Animal&{
    honey:boolean
}
const bear:Bear={
    name:'winie',
    honey:true
}

3、向現(xiàn)有類型添加新字段，interface可以通過定義同名的方式去擴(kuò)展字段，類型別名type是不能通過同名的方式去進(jìn)行擴(kuò)展的。

下面代碼是interface通過定義同名的方式向現(xiàn)有類型添加新字段

//向現(xiàn)有的類型添加新字段
interface MyWindow{
    title:string
}
interface MyWindow{
    count:number
}
const w:MyWindow={
    title:'wz',
    count:666
}

 下面代碼會(huì)報(bào)錯(cuò)，因?yàn)轭愋蛣e名type是不能通過同名的方式去進(jìn)行擴(kuò)展的。

//類型創(chuàng)建后不能更改
type MyWindow={
    title:string
}
type MyWindow={
 
}

總結(jié)

對(duì)于 type來說，更多的是對(duì)類型的一種復(fù)用，比如在項(xiàng)目中需要用到一些比較復(fù)雜的或者書寫起來很長的類型。我們可以使用 type來直接引用該類型：

type FType = boolean | string | number;

而對(duì)于 interface來說，它是正兒八經(jīng)的用來定義接口類型（約束數(shù)類型和屬性）的，且接口類型是支持繼承和聲明合并的。

所以在對(duì)于對(duì)象結(jié)構(gòu)的類型定義上，建議盡可能的使用 interface，而在合適的場(chǎng)景使用 type。

到此這篇關(guān)于TypeScript中type和interface區(qū)別及注意事項(xiàng)的文章就介紹到這了,更多相關(guān)TS type和interface區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論