數到三:0、1、2、3
Array index 從 0 開始無誤
───────────────────────── By Opshell
在 TypeScript 中, 大約有四種方式可以來定義
陣列
型別
當你宣告陣列,內容為同型別的元素時,
TypeScript會自動Inference(推論)
,
將他們當T[]
來Inference(推論)
。
語法:變數 = []
(像一般JS般的宣告)
// TS "推論" team 為 string[] 型別。
const team = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];
那會有人問啦,如果我是混合型態的陣列呢?
const team = [ 0, 'Opshell', 'Bear', 233 ];
※ 這時候TS會聰明的
Inference(推論)
成Union Type(聯型別集)
(string | number)[] 喔。
這時候就要提到一個原先JavaScript不存在的概念
Tuple(元組)
Array(數組)
放型別相同的,而Tuple(元組)
則是放不同的。
而使用上面的例子:
const team: [ number, string, string, number ] = [ 0, 'Opshell', 'Bear', 233 ];
const team2: [ number, string, string, number ] = [ 1, 'Patty', 'Egg', 7351 ];
是
Tuple(元組)
的Annotation(註記)
方式,
但是這種方式在資料多點的時候麻煩到炸阿...
簡單點的方法是利用Type Alias(別名)
的技巧:
語法type 別名: 型別
;
type teamTuple = [ number, string, string?, number? ];
const team: teamTuple = [ 0, 'Opshell', 'Bear', 233 ];
const team2: teamTuple = [ 1, 'Patty' ];
如果再宣告型別後面加
?
即表示可選參數喔~
那Array(數組)
和Tuple(元組)
有哪些差異呢?
型別 | Array(數組) |
Tuple(元組) |
---|---|---|
註記方式 | (number l string) | [ number, string, string, number] |
限制 | 只要型別一樣即可 | 順序必須和宣告的吻合,且不能多 |
不過使用元組的機會非常少,至少Ops是這樣認為的,
基本上當你塞進去的資料型別不一樣,那大部分都是有意義的,
這時候使用Object(物件)
或者是Interfaces(介面)
不是更清楚和方便呼叫嗎@"@?
語法:
變數: 型別[] = []
// string[] 表示此陣列型別只允許字串
const team: string[] = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];
// 將team 註記為 Union Type Array
let team: (string | null)[] = [];
※ 一般情況來說,TS的
Inference(推論)
會準確的推論使用者的需求,
只有為了下面的情況會比較積極的Annotation(註記)
:
- 宣告空陣列:為了避免
any
- 需求不定型別:使用
Union(聯集)
註記
※ 不過會使用TypeScript 很大一部份的原因也是為了提高程式碼的可讀性,
所以一般況還是會使用Annotation(註記)
法。
語法:
變數: Array<型別> = []
const team: Array<string> = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];
Generic(泛型)
是個比較龐大的主題,今天就先混個臉熟。
使用
Interface(介面)
來描述陣列的形狀,
// IStringArray 表示:
// 只要索引的型別是字串時,
// 那麼值的型別必須是字串。
interface IStringArray {
[index: string]: string;
}
const team: IStringArray = ['Opshell', 'Bear', 'Patty', 'Egg' ];
※ 雖然
Interface(介面)
也可以用來描述陣列,
但是我們一般不會這麼做,因為這種方式比前面的方式麻煩。
不過有一種情況例外,用它來表示類別陣列。
※
Interface(介面)
也是個複雜的主題,混個臉熟、混個臉熟。
學習完陣列的宣告方式,
除了複習到平常常用的Annotation(註記)
、Inference(推論)
外,
對於也很常用的Union(聯集)
也越來越熟練,
也提高了閃避any
的技術,
也和一些後來的花俏技術論了臉熟。
算是蠻有收穫的一天。
const team: string = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];
這一行有typo,應該是 string[]
* 講得很好~ *
有人回應突然好感動!!
感謝提醒!