學習TypeScript，筆記一：TypeScript的簡介與數據類型

該文章用於督促本身學習TypeScript，做爲學筆記進行保存，若是有錯誤的地方歡迎指正

 2019-03-27  16:50:03

---

 

1、什麼是TypeScript?

TypeScript是javascript的超集，在ts中可使用全部的js代碼，並對js進行了擴展，包括類型效驗，數據類型，接口等

如圖所示，TypeScript包含了javascript並進行延伸

 

2、準備工做

在說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，就能夠進行測試了

 

3、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語法 的類型斷言