剛轉職成功的前端菜雞第一次參賽，原本想簡單開心的每天寫一個小小的專案練習 JavaScript, CSS 跟 HTML 來當參賽文章，後來知道新的專案要使用沒學過的 ΤypeScript + Svelte，戰戰兢兢之餘也決定把參賽題目換掉，希望能夠幫助我在短時間內對 TypeScript 更加的熟悉與上手。

本系列文章定位是學習筆記，所以不會很有系統的規劃與安排，目前的打算是學到什麼就會寫什麼，學習的教材以 Traversy Media 的 TypeScript Crash Course 2021 以及 Udemy 上面的
Understanding TypeScript - 2021 Edition 加上搭配查閱官方文件為主。未來若心有餘力會再次回來編排，除了 TypeScript 之外或許也會寫到 TypeScript 與 Svelte 的結合，還請閱讀的各位多多包涵，如有錯誤也請多多指教。：）

今天第一天，想來簡單介紹一下 TypeScript，之前看很多大神的文章都提到，一個工具或是語言的誕生，在學習之前得要去了解它是為了解決什麼問題，所以以下會從 Why, How, What 這三個角度切入。

為什麼要有 TypeScript ？

用 JavaScript 開發時，要抓錯時都得在編譯過後到瀏覽器開 DevTool 來看出了什麼錯誤，這樣幾次下來除了煩躁不說之外，也有可能讓專案因為這些錯誤而要來來回回的修正阿！
比如說請看以下的程式碼：

function add (n1, n2) {
  return n1 + n2
}

const number1 = 1
const number2 = 1

const result = add(number1, number2)
console.log(result) // 2

這邊看很容易可以猜到答案會是2，因為只有短短幾行的程式碼。那如果在設定變數的時候不小心改成這樣呢？

function add (n1, n2) {
  return n1 + n2
}

const number1 = "1"
const number2 = 1

const result = add(number1, number2)
console.log(result) // 11

如果沒有把 number1 轉成 number，這就會變得跟預期的答案不一樣了！或許看到這邊心裡的 OS 是開發者們怎麼可能會犯這樣的錯呢！！！但請設想如果在上千行的 code 裡面一不留神沒有注意到時，那要追溯 bug 的原由可能就得花上不少時間了，所以如果能在「一開始」就避免掉這類的問題，是不是開發的過程能夠更加的放心了呢～

如何解決這個問題呢？

TypeScript 就是為了解決這些問題而誕生的，最重要的地方就是它增加了靜態型別，強制開發者在開發的時候要定義好每一個欄位的型別，編譯成 JavaScript 時會確保已經是沒有問題的程式碼了，減少一些動態語言會出錯的機率。

好，接下來要做什麼呢？

做什麼？當然就是把 TypeScript 學起來呀～

最後列舉出 TypeScript 的優缺點：

好的，今天的學習筆記就先到這邊，謝謝閱讀，明天見。：）