iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
Modern Web

分手前端菜雞之旅@非洲30天系列 第 11

Typescript之到底要Type還是Interface?-D11

  • 分享至 

  • xImage
  •  

到底要Type還是Interface?

昨天看了雜七雜八的TS 各種基本類型一大堆,
用的時候,我還是有疑問:到底該用Type和Interface呢?

畢竟他們根本長一樣啊!

官方推薦先使用Interface,(來源)
主要原因,加上其他找到的文章整理如下

  1. Interface的拓展性好(Type有時會產生Never類型)
  2. Type宣告後無法再修改

先看兩者都可以拓展

//幾乎長一樣
interface Foo { prop: string }

type Bar = { prop: string };

//擴展
//使用Intersection(&)擴展其他Type
- type Foo = Bar & Baz & {
-     someProp: string;
- }

//擴展其他Interface
+ interface Foo extends Bar, Baz {
+     someProp: string;
+ }

介面Interface在擴展時會自動偵測屬性有沒有衝突,
然而Type使用Intersection合併時,並不會偵測,甚至會產生:Never (參見:Empty intersection reduction)

type T1 = 'a' & 'b';  // never

//還是推薦
+ interface Foo extends Bar, Baz {
+     someProp: string;
+ }

另外,Type宣告以後,原本的類型也無法再被改變了:

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}
//no error

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

// Error: Duplicate identifier 'Window'.



以上!

想不到用什麼的時候,就先用interface吧!

環遊非洲第11天--Q

猜猜哪個非洲國家從沒有被殖民過?
1.肯亞
2.衣索比亞
3.摩洛哥
4.迦納






答案是2.衣索比亞!

19世紀西方列強瓜分非洲,衣索比亞成了沙漠以南非洲唯一一個獨立國家,儘管義大利曾經想殖民衣索比亞,但衣索比亞軍隊奮起反抗,在阿杜瓦之戰(The Battle of Adwa)後,義大利敗退下來,西方列強相繼與埃塞俄比亞建立外交關係,承認衣索比亞的獨立地位。
能夠對抗西方列強,衣索比亞贏的關鍵不僅是人民的意志,還有他特殊的地形,衣索比亞是東非大裂谷的起點,國內地形大都屬於高原,平均海拔超過3000米,義大利軍隊儘管有精良現代化的裝備,但因為不熟悉地形,陌生寒冷的高原戰場上孤立無援,就此吞了敗仗。


參考

-Preferring Interfaces Over Intersections

-Differences Between Type Aliases and Interfaces

-TypeScript Interface vs Type知多少


上一篇
掰惹!放浪的JS-為什麼要TypeScript啦-D10
下一篇
Vue3 + TypeScript 好搭檔 - D12
系列文
分手前端菜雞之旅@非洲30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言