該文章用於督促自己學習TypeScript，作為學筆記進行保存，如果有錯誤的地方歡迎指正 2019-03-27 16:50:03 一、什麼是TypeScript? TypeScript是javascript的超集，在ts中可以使用所有的js代碼，並對js進行了擴展，包括類型效驗，數據類型，介面等 如 ...
該文章用於督促自己學習TypeScript，作為學筆記進行保存，如果有錯誤的地方歡迎指正
2019-03-27 16:50:03
一、什麼是TypeScript?
TypeScript是javascript的超集，在ts中可以使用所有的js代碼，並對js進行了擴展，包括類型效驗，數據類型，介面等
如圖所示，TypeScript包含了javascript併進行延伸
二、準備工作
在說TypeScript之前先說一下如何讓ts編譯為js代碼
首先安裝 typescrpt，
npm install -g typescript
將ts編譯為js代碼，在命令行中輸入
tsc index.ts
但不能每次寫完代碼都輸入一遍 tsc 來進行編譯吧？那也太麻煩了，我們能不能直接保存就自動編譯呢？可以的，下麵是使用VScode的自動編譯方法
首先在文件根目錄下打開命令行輸入，
tsc --init
輸入以後會在文件中出現一個 tsconfig.json 文件
在文件中將 "outDir" : "./"打開，改為 "outDir" : "./js" ，表示編譯後的 .js 文件 的存放位置
在 VScode 的工具欄中選擇：終端 --> 運行任務
在工具欄彈出框里選擇：
tsc:監視 - tsconfig.json
這樣就配置完成了，可以在文件中試一試，保存ts文件後，會在文件中生成一個名為js的文件，裡面就是編譯後的 同名.js 文件，在html中引入js，就可以進行測試了
三、TypeScript的數據類型
1）布爾值類型（boolean）
使用 ts 的高級工具 類型註解來創建一個變數 bol ，要求 變數bol 的值得類型為 boolean 類型，否則會報錯
2）數字類型（number）
支持所有浮點數，並支持二進位、八進位、十進位、十六進位的寫法
3）字元串類型（string）
支持雙引號 " "、單引號 ' ' 和模板字元串 ` `
4）數組類型（Array）
創建模板字元串有兩種方式：
第一種：在變數名的類型後面加上 [ ] ，表示數組內的元素都是同一個類型：
第二種：是數組泛型，使用Array<元素類型>
5）元組類型（Tuple）
元組也是數組的一種，ts的數組如果使用使用類型註解來創建，數組的元素就具有效驗的功能，但是未免太單一，而使用元組的方式創建數組，會稍微靈活那麼一點點
使用元組來創建：
瀏覽器輸出為：
在圖示中可以看到，元組可以規定前兩個元素的類型，下標為 0 的元素必須為 string，下標為 1 的元素必須為 number，而後的元素則會使用聯合類型替代，可以是 string 或 number ，我嘗試了隔空添加元素，下標為 2 的元素 顯示為 empty（空），在遍歷這個元組的時候，empty不會被遍歷出來，只會遍歷到 “10” 1 “123” ,對應的下標為0,1,3
圖示中的報錯是vscode插件的報錯，不會影響運行
6）枚舉類型（enum）
枚舉類型可以是對狀態碼的標識，如 0 代表成功支付 ，1 代表失敗支付，2 代表取消訂單，3 代表未支付 這樣的狀態碼標識不易讀，可以使用枚舉的方式來標識
看到枚舉類型 Status 的輸出，就明白了為什麼可以得到 Status[1] 為success 了
枚舉類型也可以不賦值，預設從 0 開始，一旦手動賦值後，前面的值不變，後面的值會依次遞增
7）任意類型（any）
在實際使用中我們也許並不想讓 ts 進行類型註解，就可以使用 any類型 ，any類型的好處在於，當我們不確定這個值為什麼類型的時候，用 any類型註解 聲明後的變數，他的類型是不確定的，從而使得這個變數可以調用任何不同類型的方法，但是編譯器不會檢查
可以使用 any 來進行數組的類型註解，不限制數組的元素類型
8）無類型（void）
void類型可以說與any類型完全相反，當函數沒有返回值時返回的類型就是 void 類型，一般來說聲明一個 void類型 的變數沒有什麼用，void 類型只能被賦值，undefined 和 null
在 typescript 中 預設情況下 undefined 和 null 是所有類型的子類型，可以將他們賦值給 number 類型的變數
當指定了嚴格模式 --strictNullChecks 後，undefined 和 null 只能賦值給他本身
9）never類型（never）
never類型表示永遠不存在的值的類型，
引入官方文檔的示例圖
never類型是所有類型的子類型，但never類型本身沒有子類型或任何類型都不能賦值給他，連any都不行，never只能賦值給never
9）Object類型
object類型表示非原始類型，就是除了 boolean，number，string，array，undefined，null 之外的類型
參考官方給的圖片
圖片示例的意思我理解的是這樣的：
創建一個create函數，參數 o 的類型註解表示，參數的類型為 object 或者 null ，函數create的返回值為 void類型
接著調用函數，發現參數為 {prop:0} 和 null 是可以的
參數為 數字 42，字元串 "string"，布爾值 false，無類型 undefined，都不可以
補充：類型斷言
類型斷言使用在告訴編譯器，你已完全確定這個值的類型，編譯器將會跳過數據檢查，不影響運行
類型斷言有兩種寫法
第一種：使用尖括弧
第二種：使用 as 語法
註意：在 TypeScript 中使用 JSX，只能用 as語法 的類型斷言
