TypeScript | 聽說 JavaScript 有什麼弱型別？ TypeScript 的基本用法 ( I )
前言
Hi！各位好！我是神 Q 超人。最近無意間取得「深入淺出設計模式」，這本書裡面講解了非常多的設計模式還有物件導向原則，但大家都知道， JavaScript 的物件導向並不像 Java 或 C# ，除了 class based 和 prototype based 的差別外，也少了直接定義 interface （介面）、abstract class （抽象類別）等方法，
TypeScript 改變了一切。
再接著下去前我得先說明， JavaScript 仍然有辦法透過自身實現 interface ， 但它所需要的工程可能比想像中的多，這時也許我們能夠回想 class 的出現為 JavaScript 操作 Prototype 帶來多大的改變，就能猜想 TypeScript 僅僅增加了 interface 就能產生多少便利，
但是並不代表 TypeScript 改變了 JavaScript 。
所有的 TypeScript 最後還是得被編譯成 JavaScript 執行，他也仍然是個 prototype based 的物件導向語言。
本文也不會說明到 TypeScript 內太艱澀的語法，包含上面提到的 interface 、 abstract class 也都還會在日後的文章中再進行說明，所以如果只要你有一些 JavaScript 的基礎，但完全不會 TypeScript 也能夠放心讀完。
TypeScript
TypeScript 是什麼？
TypeScript 是 JavaScript （以下簡稱 JS ）所有版本的超集合，因此除了新增一些語法外它與原生的 JS 其實並無不同，也就是說今天就算是開了一個 .ts 的 TypeScript 檔案，也能夠在裡面暢打 JS ，當然你還是得將他編譯為 .js 檔案，即使內容不會改變。
另外，也因為 TypeScript 是 JS 的超集合，擁有所有版本的語法，所以編譯前還能夠在 TypeScript 的設定檔中指定要編譯為哪個版本的 JS 。
Install
TypeScript 和其他 package 相同是個開源專案，可以從 GitHub 上找到他，也能透過 npm 下載，如果電腦上已經有 node 環境，就直接以下方指令將 TypeScript 安裝到電腦的全域環境中：
npm install -g typescript如果還沒有 node 環境，可以參考「第一次建置node.js開發環境和安裝npm就上手！」
因為上方的指令會將 TypeScript intall 到全域環境，記得要注意權限，順利完成後就能開始學習 TypeScript ：
Config file 設定檔
首先建立一個專案，並在專案根目錄下輸入下方指令：
tsc --init執行後會發現，專案內多了一個 tsconfig.json 檔案，裡面會描述所有相關設定，設定內容也都有在同行後方的註解說明，這點還滿不錯的，然後上方有提到說，能夠在編繹的時候指定 JS 版本，就是下方的 target 目前他的值為 es5 因此編譯後就會是 es5 版的 JS ，目前最低可以編譯到 es3 ：
TypeScript
接下來建立一個 .ts 的檔案，並輸入下方內容：
const writeName = name => console.log(name);writeName('神Ｑ超人');
這是一個簡單的 Function ，執行為送入什麼就印出什麼，但是當我們將這段程式鍵入 .ts 檔，會發現 Function 參數下的 name 出現了紅線 error ：
TypeScript 會像 ESLint 一樣，檢查程式中是否有可能會出現 Bug 的地方，如上方的例子，雖然 writeName 主要是用來印出姓名，但是因為 JavaScript 語言的關係，也許傳入的不是 String 的姓名，而是 Number 的學號，甚至是一個 Function ，他也會執行，這結果完全不是正確的對吧，這時候就得在 writeName 內新增判斷，避免傳入參數的型別不是 String ：
const writeName = (name) => {
if(typeof name === 'string') {
console.log(name);
} else {
/* 其他處理 */
}
};但是 TypeScript 不需要這麼做，他只需要為 writeName 中的 name 參數指定型別，便能解決這個問題：
就像上方的操作，只要透過 : 分號便能為參數指定型別，而其實不只是參數，這在任何需要型別的地方都適用，例如宣告一般變數：
const age: Number = 20;// 也可以宣告多個符合的型別，型別間用 | 隔開
const nickName: String | Number
當然，如果我將 String 型別的值指定到型別為 Number 的變數 age 上就會出錯：
但是有些編輯器是不像 Visual Studio Code 會出現紅色底線，如果不使用該編輯器，還是得人工避免掉這個狀況嗎？
不對哦！記得 .ts 還需要經過編譯才能夠變成 .js 嗎？在編譯時， .ts 就會將語法不正確的地方揪出來，並停止編譯。
Compile 編譯
TypeScript 內建就能夠直接做編譯，只需要下一行指令：
tsc index.ts如果成功編譯就不會出現任何訊息，而且會發現同目錄下多了一個 .js 檔案，裡面就是被編譯過的 JavaScript ，但是如果是上方 age 的值型別與宣告型別不符的情況，就會停止編譯，並指出錯誤：
如果是上方的 writeName 那就會被成功編譯，編譯後的 JS 檔案如下：
總結
初次使用的心得會覺得很有寫 C# 的既視感，畢竟是同一個老爸生出來的孩子 😆 ，用 TypeScript 首先就先解決了讓人詬病的弱型別問題，減少 Bug 產生的機會，且透過編譯還能夠支援到 es3 的 JS 版本，真的相當強大，而且本文甚至還沒有提到 TypeScript 內的 Class 、 interface 等語法，那才是 TypeScript 的吸引人的地方，他讓 JS 中複雜的 Prototype 操作簡化了非常多，也讓開發者更清楚 Class 之間的關係。
本文介紹了 TypeScript 的建置環境和編譯方式，並簡單 Demo 了對語法的檢查及對變數宣告時增加型別的方法，下一篇文章會先紀錄怎麼將 TypeScript 加入 React 中，之後再來以 TypeScript 的角度講解物件導向的技巧。
如果文章中有任何問題或是建議，再麻煩留言告訴我，我會盡快修正回覆，謝謝大家！
參考文章
