前言

會碰到 TypeScript 是因為之前無意間取得 深入淺出設計模式 ，覺得那些為了解決問題而整理出來的設計模式太有趣了，包含那些 Class、Interface 的使用等等，都為我之後再開發 React 帶來很深遠的影響。

筆者還是要先聲明，JavaScript 仍然有辦法透過自身實現 interface， 但它所需要的工程可能比想像中的多，這時也許我們能夠回想 class 的出現為 JavaScript 操作 Prototype 帶來多大的改變，就能猜想 TypeScript 僅僅增加了 interface 就能產生多少便利，

但是並不代表 TypeScript 改變了 JavaScript 。

TypeScript 與 React 相同，最後終究得經過編譯，才能讓瀏覽器讀懂。

前置準備

1. 一顆擁有學習熱忱的心。

TypeScript

TypeScript 是 JavaScript（以下簡稱 JS ）所有版本的超集合，因此除了新增一些語法外它與原生的 JS 其實並無不同，也就是說今天就算是開了一個 .ts 的 TypeScript 檔案，也能夠在裡面暢打 JS ，當然你還是得將他編譯為 .js 檔案，即使內容不會改變。

使用方法

安裝 TypeScript

因為之後可能會一直用到，所以直接開啟終端機，並在 install 時加上 -g 將 TypeScript 裝在全域環境中：

npm install -g typescript

因為是加到全域環境中，如果沒權限無法安裝的話就加上 sudo 吧！

建立新專案

這個篇章需要重新建立一個新專案，等到熟悉 TypeScript 一點，再將 TypeScript 加入先前篇章建立的專案中。

使用 npm init -y 初始化 package.json，就能看見一切重頭開始，接下來用 cd 指令進入專案裡，另外運行 tsc --init 初始化 TypeScript 的專案內容，輸入完後可以看見專案下多了一個 tsconfig.json，它是 TypeScript 的設定檔，裡面有許多可以設置的設定，而且每個設定後都有註解說明在做什麼的，非常貼心，現在我們暫時不需要動它：

基本用法

在專案目錄下建立副檔名為 .ts 的檔案：

|-index.ts
|-package.json
|-tsconfig.json

將它打開，建立一個 function，用來輸出傳入的參數，像這樣子：

const printParam = param => console.log(param);

但明明 function 的語法上沒什麼問題，卻可以看到 param 下方出現紅線警告，將滑鼠移過去會得到下方訊息：

多麼新奇的錯誤對吧！這個意思是說，因為沒有替 param 指定任何型別，所以它被預設為 any，如果今天是手動替它設置 any 就還好，但是被預設為 any 就是危險的了，因為就無法確定傳入的型別會不會導致 printParam 出錯。

加上型別吧！在 TypeScript 中，只要在變數後面打上 : 就能替變數加上 string、number 等型別，例如：

const printParam = (param: string) => console.log(param);

而 function 本身也是需要型別的，即使它沒顯示錯誤，而 function 的型別也很簡單，如果是只有執行，例如 printParam 的情況，就設置為 void，如果有回傳什麼，就以回傳變數的型別為主，printParam 的情況為：

const printParam = (param: string): void => console.log(param);

那現在，分別用 String 和 Number 兩種型別來執行 printParam：

const printParam = (param: string): void => console.log(param);

printParam('string');

printParam(1234);

理所當然可以看見 printParam(123) 的那行出現警告：

警告內容為，printParam 的參數應該要是字串型態，Number 是不行的哦！

如果確定要讓 printParam 可以接收兩種型別，可以在 param 後指定多個型別，而每個型別之間使用 | 隔開：

const printParam = (param: string | number): void => console.log(param);

這麼一來就沒問題了！

編譯

認識完基本型別後就可以就能試著將 TypeScript 編譯成 JavaScript 了，過程也很簡單，只需要在終端機中輸入：

tsc index.ts

就能看見相同目錄下增加了一個同名的 .js 檔案，裡面便是編譯過後的 JavaScript：

從編譯過後的 JavaScript 來看，可以發現 printParam 並沒有做任何關於型別的判斷，也就是說 TypeScript 的檢查僅僅是在 .ts 內而已。

但是有些編輯器是不像 Visual Studio Code 會出現紅色底線，如果不使用該編輯器，就得一個一個看嗎？

不對哦！因為在編譯 TypeScript 時，就會自動將語法不正確的地方揪出來，並停止編譯，例如在 index.ts 內再執行一次 printParam，並且這次傳入 {} 空物件：

printParam({});

假設在開發時忽略了這個錯誤，就進行編譯，那編譯時就會出現錯誤訊息中斷編譯，並告訴你說，在哪個檔案的哪一行中出現了什麼問題，得先修正完後才能正常編譯：

本文的範例程式碼會提供在 GitHub 上，歡迎各位參考（當然是提供可以編譯的版本）

結尾

本篇章用最簡單的方式建立了 TypeScript 的專案，也學習了基本的型別宣告和編譯（更多型別可以參考官方文件），接下來的章節會繼續介紹 Class 與 Interface。

如果文章中有任何問題，或是不理解的地方，都可以留言告訴我！謝謝大家！