詳解typescript中介面interface和類型別名type的用法區別

最近本文作者在用typescript開發程式碼時發現介面interface和類型別名type用法很像,這篇文章我們就來聊聊這兩個用法的異同點。

異同點

詳解typescript中介面interface和類型別名type的用法區別

圖1

從圖1中我們發現介面interface和類型別名type在定義一個普通的物件型別時沒啥區別,泛型都能照常用。

如果我們定義一個簡單型別呢?

詳解typescript中介面interface和類型別名type的用法區別

圖2

如圖2所示,像這樣的簡單型別的定義,type用起來就很隨意,但是interface恐怕就無法做到了。

詳解typescript中介面interface和類型別名type的用法區別

圖3

如圖3,它們兩都可以輕鬆實現一個函式的型別,寫法稍微有點區別,但是它們都能被類class實現嗎?

詳解typescript中介面interface和類型別名type的用法區別

圖4

如圖4所示,介面interface可以被一個類class實現(implements),但是類型別名是不行的。

詳解typescript中介面interface和類型別名type的用法區別

圖5

類型別名type不但不能被extends和implements,就連自己也不能extends和implements其它型別,好在我們可以用交叉型別代替extends來達到同樣的效果。

說到這裡,你就會發現type可以使用聯合型別、交叉型別還有元組等型別,如下圖。

詳解typescript中介面interface和類型別名type的用法區別

圖6

個人認為類型別名type最大的特點是可以結合typeof使用,如下:

詳解typescript中介面interface和類型別名type的用法區別

圖7

總結

這篇文章主要總結了typescript中類型別名type和介面interface在使用上的一些區別,在類class的型別定義中我們使用介面interface來做,在定義簡單型別、聯合型別、交叉型別、元組時我們用類型別名type來做,並且它和typeof能夠天然的結合在一起使用。在雙方都能實現的區域,它們的區別不大。

喜歡我的文章就關注我吧,有問題可以發表評論,我們一起學習,共同成長!