閱讀今天的文章前，先回顧一下昨天的學習，回答看看：

• 簡單陣列的型別推論機制為何？
• 混合陣列的型別推論機制為何？

如果有點不清楚答案的話，可以看看 Day10 的文章喔！

今天要來探討陣列的型別註記，讓我們從創建空陣列開始

創建空陣列

和在 JS 中一樣，陣列有數種宣告和創建的方式

const foo1: string[];
const foo2: string[] = [];
const foo3: string[] = new Array()
const foo4: string[] = Array()

倘若希望創建預先填充了一些內容的陣列，可以使用 ES6 的 Array.prototype.fill

const foo:string[] = new Array(3).fill('hi');
console.log(foo); // ['hi','hi','hi'];

陣列宣告

官網上介紹了兩種明確型別陣列的宣告方式，第一種是我們很熟悉的型別註記(Type Annotation)，第二種方式是泛型(generic)，寫法是 Array，雖然是第一次看到，但之後的文章會再更詳細介紹。

let foo: string[] = ['hello', 'ya', 'yeah'];  //較推薦 
//或
let foo: Array<string> =['hello','ya','yeah'];

但如果希望陣列裡面同時可以放字串，也可以放數字呢？這時候，聯合型別(union)就可以上場了！

let foo: (string| number)[] = ['hello', 'ya', 'yeah'];
//或
let foo: Array<string | number> = ['hello', 'ya', 'yeah'];

foo.push(1)

在註記型別時，別忘了外面的()唷!否則，TS 會解讀成字串和數字陣列的聯集，這時候 foo 就可以加入數字型別的元素了。

來個重點整理吧：陣列的型別註記

1. 陣列的元素沒有你要的型別，可以用 union 聯合型別進行型別註記
2. 倘若為空陣列，上一篇有講到在預設狀況下是 any 型別，這時候特別需要使用型別註記，因為 any 型別很容易有無預期的錯誤。

嗯，其實這篇文章的重點-陣列型別註記到這邊已經講完了XD 接下來想順便複習陣列的基礎操作方法(想要複習陣列陣列操作方法的朋友可以繼續看下去)

陣列操作

在 TS 中，所有 JS 可以使用的陣列方法都可以執行

遍歷陣列

let scores :number[] = [10, 20, 30, 40];   
 
for (let score of scores) {
    console.log(score);     //10 20 30 40
}

註：for...in主要用來遍歷物件

複製陣列

使用 ES6 展開(spread)運算子將 origScores 陣列中的元素取出放入新的陣列 clonedScores。兩個陣列獨立，不互相影響。

let origScores :number[] = [10, 20, 30];   
let clonedScores = [...origScores];
 
console.log(clonedScores);      //[10, 20, 30]
 
origScores.push(40);
 
console.log(origScores);        //[10, 20, 30, 40] 
console.log(clonedScores);      //[10, 20, 30] 複製陣列不會被影響

合併陣列

let score1 :number[] = [10, 20, 30];  
let score2 :number[] = [40, 50, 60];  
 
let mergedScore = [...score1, ...score2];
console.log(mergedScore);   //[ 10, 20, 30, 40, 50, 60 ]

陣列解構

let arr:number[] = [12,13] 
let[x,y] = arr 

console.log(x)  //12
console.log(y)  //13

小結

今天短短介紹了陣列的型別註記方式以及複習 JS 陣列基礎操作方法，明天將要來探討 JS 沒有的特殊陣列型別-元組(Tuples)，明天見啦！