[Day08] - 通通裝起來 - Array(陣列).md

這個那個不要，剩下的通通裝起來。

數到三：0、1、2、3Array index 從 0 開始無誤───────────────────────── By Opshell

目標: Array Type 法

在 TypeScript 中，大約有四種方式可以來定義陣列型別

過程：

1. Array Inference(推論)
當你宣告陣列，內容為同型別的元素時， TypeScript會自動Inference(推論)，將他們當 T[] 來Inference(推論)。語法：變數 = [](像一般JS般的宣告)
typescript
```
 // TS "推論" team 為 string[] 型別。
 const team = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];
```
1
2
那會有人問啦，如果我是混合型態的陣列呢?
typescript
```
 const team = [ 0, 'Opshell', 'Bear', 233 ];
```
1
※ 這時候TS會聰明的Inference(推論)成 Union Type(聯型別集) (string | number)[] 喔。
這時候就要提到一個原先JavaScript不存在的概念Tuple(元組)Array(數組)放型別相同的，而Tuple(元組)則是放不同的。而使用上面的例子：
typescript
```
 const team: [ number, string, string, number ] = [ 0, 'Opshell', 'Bear', 233 ];
 const team2: [ number, string, string, number ] = [ 1, 'Patty', 'Egg', 7351 ];
```
1
2
是Tuple(元組)的Annotation(註記)方式，但是這種方式在資料多點的時候麻煩到炸阿... 簡單點的方法是利用Type Alias(別名)的技巧：語法 type 別名: 型別;
typescript
```
 type teamTuple = [ number, string, string?, number? ];

 const team: teamTuple = [ 0, 'Opshell', 'Bear', 233 ];
 const team2: teamTuple = [ 1, 'Patty' ];
```
1
2
3
4
如果再宣告型別後面加?即表示可選參數喔~ 那Array(數組)和Tuple(元組)有哪些差異呢?
型別 Array(數組) Tuple(元組)
註記方式 (number l string) [ number, string, string, number]
限制只要型別一樣即可順序必須和宣告的吻合，且不能多
不過使用元組的機會非常少，至少Ops是這樣認為的，基本上當你塞進去的資料型別不一樣，那大部分都是有意義的，這時候使用Object(物件)或者是Interfaces(介面)不是更清楚和方便呼叫嗎@"@?

型別	`Array(數組)`	`Tuple(元組)`
註記方式	(number l string)	[ number, string, string, number]
限制	只要型別一樣即可	順序必須和宣告的吻合，且不能多

2. Array Annotation(註記)
語法：變數: 型別[] = []
typescript
```
 // string[] 表示此陣列型別只允許字串
 const team: string = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];

 // 將team 註記為 Union Type Array
 let team: (string | null)[] = [];
```
1
2
3
4
5
※ 一般情況來說，TS的Inference(推論)會準確的推論使用者的需求，只有為了下面的情況會比較積極的Annotation(註記)：
- 宣告空陣列：為了避免 any
- 需求不定型別：使用Union(聯集) 註記
※ 不過會使用TypeScript 很大一部份的原因也是為了提高程式碼的可讀性，所以一般況還是會使用Annotation(註記)法。

3. Array Generic(泛型陣列)
語法：變數: Array<型別> = []
typescript
```
 const team: Array<string> = [ 'Opshell', 'Bear', 'Egg', 'Patty' ];
```
1
Generic(泛型)是個比較龐大的主題，今天就先混個臉熟。

4. interface (介面)
使用 Interface(介面) 來描述陣列的形狀，
typescript
```
 // IStringArray 表示：
 // 只要索引的型別是字串時，
 // 那麼值的型別必須是字串。
 interface IStringArray {
     [index: string]: string;
 }
 const team: IStringArray = ['Opshell', 'Bear', 'Patty', 'Egg' ];
```
1
2
3
4
5
6
7
※　雖然 Interface(介面) 也可以用來描述陣列，但是我們一般不會這麼做，因為這種方式比前面的方式麻煩。不過有一種情況例外，用它來表示類別陣列。
※ Interface(介面) 也是個複雜的主題，混個臉熟、混個臉熟。

小結：

學習完陣列的宣告方式，除了複習到平常常用的Annotation(註記)、Inference(推論)外，對於也很常用的Union(聯集) 也越來越熟練，也提高了閃避any的技術，也和一些後來的花俏技術論了臉熟。算是蠻有收穫的一天。

[Day08] - 通通裝起來 - Array(陣列).md ​

這個那個不要，剩下的通通裝起來。 ​

目標: Array Type 法 ​

過程： ​

1. Array Inference(推論) ​

2. Array Annotation(註記) ​

3. Array Generic(泛型陣列) ​

4. interface (介面) ​

小結： ​

[Day08] - 通通裝起來 - Array(陣列).md

這個那個不要，剩下的通通裝起來。

目標: Array Type 法

過程：

1. Array Inference(推論)

2. Array Annotation(註記)

3. Array Generic(泛型陣列)

4. interface (介面)

小結：