TypeScript基礎類型總結

近期正在學習TypeScript，正好總結一下學習的知識點，便於本身和讀者記憶。 官方文檔是入門的好途徑，中文文檔也翻譯的很詳細，建議打算學習TypeScript的小夥伴先入手官方文檔：www.tslang.cn/docs/handbo…。

TypeScript的類型系統徹底包含了JavaScript的類型系統，其中又新增了一些類型便於開發，後文我將會把TypeScript的全部基礎類型一一介紹。但在介紹這些類型以前，我須要先舉例讓一些還沒接觸過TypeScript的小夥伴先了解一下經過TypeScript的基礎類型來變量變量或者常量。

先來看下這幾個例子：

// javascript
let hasFinished = false
let myAge = 25
let myName = '馬克豚'
let myHobby = ['打籃球', '打遊戲', '看書']

// typescript
let hasNotFinished: boolean = true
let yourAge: number = 18
let yourName: string = 'good reader'
let yourHobby: string[] = ['愛好一', '愛好二', '愛好三']
複製代碼

經過上面的例子，聰明的讀者們應該已經發現TypeScript與JavaScript在定義變量寫法上的一些不一樣。但實際上上面兩種寫法在TypeScript是等價的，由於TypeScript會根據變量的初始值自動推斷出變量的類型，因此這種狀況下也能夠不指定變量的類型，但值得注意的是類型一旦肯定是不容許改變的（eg: yourAge = '18'不被容許）。 再說到兩種寫法的不一樣之處，細心的讀者能夠發現，在TypeScript定義變量時，在變量名後面指定變量的類型，寫法爲：

變量名: 變量類型
複製代碼

熟悉Java的同窗可能知道，在java中定義變量一樣須要指定變量類型，不過類型名是定義在變量名以前的，咱們能夠把TypeScript的這種定義方法稱爲類型後置，即類型定義在變量名稱以後。 注意：類型後置這種說法並非官方說法，純屬我我的爲了便於記憶加以修飾的作法，不習慣的讀者能夠不作理會。

上面說了那麼多，我如今正式開始一一介紹TypeScript的基礎類型。

布爾類型(Boolean)

TypeScript的布爾類型，只具備true、false兩個可選值。

let hasNotFinished: boolean = true
複製代碼

因爲TypeScript自己會根據變量的初始值推斷出變量的類型，因此下面的代碼也能達到一樣的效果。可是我仍是建議讀者在最開始練習時仍是加上變量類型的聲明，便於加深映像，同時在多人協做中，顯示聲明變量類型會使代碼更具備可讀性（見仁見智）。

let hasNotFinished = true
複製代碼

數字類型(Number)

和JavaScript同樣，TypeScript裏的全部數字都是浮點數。 這些浮點數的類型是 number。 除了支持十進制和十六進制字面量，TypeScript還支持ECMAScript 2015中引入的二進制和八進制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

複製代碼

上面的例子中都是在定義變量的時候賦予了初始值，可是對於先定義後賦值的作法，建議先給變量定義數據類型。

字符串類型(String)

和JavaScript同樣，可使用雙引號（ "）或單引號（'）表示字符串。但同時TypeScript支持ES6的模板字符串。

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`; 複製代碼

數組類型(Array)

TypeScript有兩種定義數組的方式：

let myList: number[] = [1,2,3]
let yourList: Array<number> = [1,2,3]
複製代碼

值得注意的是，在Javascript中，並不會限定數組中元素的類型，可是在TypeScript中一旦選定數組元素的類型，就不能再給該數組的元素賦予其餘類型的值。

// javascript
let myList = [1, '2', [3], 4]
// typescript
let myList: number[] = [1,2,3,4]
myList[1] = '2' // error, 不能改變數組元素的類型 
複製代碼

下面我再舉幾個例子，方便擴展你們的理解：

let list: number[][]
list = [ [1,3,4], [2,3,4] ]
list = [ [1, '2'] ] // error
list = [ 1,2 ] // error  
複製代碼

上面的例子中，list爲一個數組，它的子元素爲一個數字類型的數組，因此它的子元素必須是數組類型，並且必須是數字類型的數組。 根據這個例子，你們能夠觸類旁通，多多嘗試，就能很好的理解TypeScript的數組類型了。

元組類型(Tuple)

元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同。 好比，你能夠定義一對值分別爲 string和number類型的元組。 根據上面的描述，能夠提取出幾個關鍵點：

1. 元組是一個數組，能夠經過數組的方式去訪問數組元素，經過數組的方式操做元組；
2. 元組中元素的數量是固定的，每一個元素的類型也是肯定的，因此不能再去修改元素的類型，默認不容許向元組中添加新的元素
複製代碼

來看下面的例子：

let list: [number, string] = [1, '2']
console.log(list.length) // 2
list[2] = '3' // error
複製代碼

因爲元組的類型和長度是固定的，因此使用場景並不豐富，須要在特定的場景中使用。

枚舉類型(Enum)

枚舉類型是JavaScript不具備的數據類型，可是在其餘編程語言中是很常見的一種數據類型。使用枚舉類型能夠爲一組數值賦予友好的名稱。 下面舉例說明枚舉類型的用法：

enum Color { Red, Green, Blue }
let c: Color = Color.green
console.log(Color.Red) // 0
console.log(Color.Green) // 1
console.log(Color.Blue) // 2
複製代碼

枚舉類型能夠理解爲一個由鍵值對組成的對象，它默認是從0開始賦值的，每一位遞增1。 再來看下面的幾個例子：

enum Color { Red = 2, Green, Blue }
console.log(Color.Red) // 2
console.log(Color.Green) // 3
console.log(Color.Blue) // 4
複製代碼

enum Color { Red, Green = 4, Blue }
console.log(Color.Red) // 0
console.log(Color.Green) // 4
console.log(Color.Blue) // 5
複製代碼

枚舉類型初始值爲字符串

enum Color1 { Red = '1', Green, Blue } // error: 須要給每一個枚舉元素賦予初值
enum Color2 { Red = '1', Green = 4, Blue }
console.log(Color2.Red) // '1'
console.log(Color2.Green) // 4
console.log(Color2.Blue) // 5
複製代碼

從上面的例子能夠總結出下面幾點：

1. 枚舉在默認狀況下是從0開始賦予初始值的，每一位遞增1；
2. 枚舉當前元素的值的上一位若是是number類型，那麼下一位（在沒有賦予初始值得狀況下）默認賦值爲上一位的值+1
3. 若是枚舉中的上一位元素爲字符串類型，那麼當前的元素必須手動賦予初始值
複製代碼

Any類型

聲明爲any類型的變量，它的類型是不固定的，因此在賦予初始值後仍舊能夠繼續改變變量值的類型。當不給變量指定類型的時候，變量會默認被賦予any類型，直到給變量賦予初始值以後，TypeScript纔會根據變量值推斷出變量類型並肯定該變量的數據類型。

let notSure: any = 5
notSure = '5'
notSure = [5]

let list: any[] = [1, '2', false]
list[1] = 2
list[2] = 'false'
複製代碼

Void類型

void類型與any類型，它表示沒有任何類型。當函數沒有返回值的時候，那麼它的返回值類型會是void類型。

function warnUser(): void {
    console.log("This is my warning message");
}
複製代碼

聲明一個void類型的變量沒有什麼大用，由於你只能爲它賦予undefined和null：

let unusable: void = undefined;
複製代碼

####Null 和 Undefined TypeScript裏，undefined和null二者各自有本身的類型分別叫作undefined和null。 和 void類似，它們的自己的類型用處不是很大。當變量被定義爲null(undefined)類型的時候，它們只能被賦值爲null(undefined)。

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
u = null // error
n = undefined // error
複製代碼

Never

never類型表示的是那些永不存在的值的類型。 下面是一些返回never類型的函數：

// 返回never的函數必須存在沒法達到的終點
function error(message: string): never {
    throw new Error(message);
}

// 推斷的返回值類型爲never
function fail() {
    return error("Something failed");
}

// 返回never的函數必須存在沒法達到的終點
function infiniteLoop(): never {
    while (true) {
    }
}
複製代碼

Object類型

object表示非原始類型，也就是除number，string，boolean，symbol，null或undefined以外的類型。 使用object類型，就能夠更好的表示像Object.create這樣的API。例如：

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
複製代碼

類型斷言

有時候你會遇到這樣的狀況，你會比TypeScript更瞭解某個值的詳細信息。 一般這會發生在你清楚地知道一個實體具備比它現有類型更確切的類型。

經過類型斷言這種方式能夠告訴編譯器，「相信我，我知道本身在幹什麼」。 類型斷言比如其它語言裏的類型轉換，可是不進行特殊的數據檢查和解構。 它沒有運行時的影響，只是在編譯階段起做用。 TypeScript會假設你，程序員，已經進行了必須的檢查。

類型斷言有兩種形式。 其一是「尖括號」語法：

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
複製代碼

另外一個爲as語法：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
複製代碼

兩種形式是等價的。 至於使用哪一個大多數狀況下是憑我的喜愛；然而，當你在TypeScript裏使用JSX時，只有 as語法斷言是被容許的。

上述總結中，void、null、undefined、never、object、類型斷言，我是截取了官方文檔的內容，由於這些類型自己可能應用場景不多（void、null、undefined、never），或者不須要多講（object）,又或者官方說的更明晰（類型斷言）；除此之外，我參考了官方的說法，並更多地加入了本身的理解。

讀完本文，我但願讀者對於TypeScript至少能有如下幾個認知：

1. 定義變量時須要給變量指定類型；
2. 類型寫法是 ：變量: 變量類型，類型後置；
3. 類型一旦肯定沒法改變（不考慮any類型的說法）；
4. 對於類型斷言有印象；

對於TypeScript類型系統，讀者須要在實踐中多多練習才能逐漸掌握，經過本文能有一個概念性的認識便可，一如古人言：紙上得來終覺淺，絕知此事要躬行。