DEV Community

Cover image for 【TypeScript 30】Day 5:陣列與元組 ( Tuple )
Angus
Angus

Posted on

【TypeScript 30】Day 5:陣列與元組 ( Tuple )

經過前幾天的分享,已經大致上介紹完了大部分基本物件的型別推論跟註記的機制囉!!

緊接著就繼續介紹 TypeScript 有而 JavaScript 沒有的資料型別吧!!

元組( Tuple ) 以及列舉 ( Enums )

元組其實與陣列很像,所以在這裡我們先來比較一下兩者的區別,既然要比較那就一樣從型別推論與定義開始吧!!

元組 ( Tuple ) 的定義與型別推論

  • 當元組值被指派到變數時,一定得進行積極型別註記。

在這裡舉個例子:若想存取各種調酒的資訊,以 JS 陣列格式存取 — 第一個值為基酒名稱,酒精濃度,添加香料,基酒年分別。

圖一

依造前一篇提到的 union 的觀念我們預期推斷出來的型別會是 (string | number | Date)[] ,在這種情況下我們無法得知陣列中各索引所對應的型別,因此我們在這裡我們使用 TS 的元組型別,會像下圖這樣。

圖二

在這裡讀者就會想到[string, number, string, Date]這段註記型別的程式碼重複性很高,肯定有優化的空間,有的!! 那就是 — — 型別化名(Type Alias)

型別化名的規則如下

type <custom-type-name> = <your-type>;
Enter fullscreen mode Exit fullscreen mode

不過在每個同樣類型的陣列重複了相同的程式碼一定會有優化的空間,在這裡,使用型別化名我們只需要標示一次此陣列的型別,接下來使用定義好的化名就可以省略一長串的元組型別格式了,稱為 — *抽象化(Abstraction)*

圖三

那麼使用元組對我們開發上有什麼實質上的幫助呢?

在回答這個問題之前要先曉得元組與陣列的差異,相信看過剛剛的型別註記後就能看出差別,以調酒資料為例:

圖四、陣列與元組差別

  • 重點陣列型別中,只要裡面的元素為此陣列規定的範疇,就不會出錯,也就是說陣列中的元素型只要是 string 、 number 、 Date 就不會出問題,元素的數量、順序都不被列入規定範疇 ; 反之,使用元組不僅型別必須符合規定外,順序、數量都必須按造元組的規定。

看看例子吧:

圖五

如此一來就可以比較準確的推斷該陣列中的各個型別

圖六

不過讀者可能又會想說,如果資料型別相同的話不也一樣可能誤解元素的意義嗎 ? 拿剛剛的例子來說:

同為字串類型的基酒( index 0 ) ,和香料(idnex 2 ) ,如果反過來的話並不會出錯,原本的意思是 :Manhattan 的基本資料:基酒為 whisky **,酒精濃度 30%,添加香料使用 "Angostura"**,基酒出產日期為 2005/02/03。

不過因為調換字串類型 typeScript 無法幫我們判別基酒與香料的差別,因此當調換時變成基酒是 “Angostura” ,香料為 whisky。這就完全不符合我們的預期了,因此建議使用元組定義型別時,建議使用 Josn 格式定義,如下:

如此一來不僅解決了順序差異的問題之外更增加了描述性。

圖七、使用JSON格式撰寫元組

小結:這幾天忙著面試,原本預計這篇文章要在 2 天前完成的,拖了幾天比較有時間完成,接著下來要介紹的是 TypeScript 另一個自定義型別 ( Enum )

Top comments (0)