TypeScript 基礎(chǔ)類型

自本節(jié)起，我們將開始接觸 TypeScript 的類型系統(tǒng)，這也是 TypeScript 最為核心的部分。

本節(jié)介紹 TypeScript 中一些基礎(chǔ)類型，有些特殊類型會在接下來進行單節(jié)描述。在進行變量聲明時，需要注明其對應(yīng)的類型，這個跟 JavaScript 的變量聲明不同。在寫 TypeScript 代碼時，所有的變量都需要有類型，這個觀點要深刻的烙印在心里。

1. 慕課解釋

TypeScript 中的類型有：

• 原始類型
  • boolean
  • number
  • string
  • void
  • null
  • undefined
  • bigint
  • symbol
• 元組 tuple
• 枚舉 enum
• 任意 any
• unknown
• never
• 數(shù)組 Array
• 對象 object

2. 布爾類型

最簡單的數(shù)據(jù)類型就是 true / false 值：

const registered: boolean = false
const done: boolean = Boolean(0)

變量聲明語法：冒號 : 前面是變量名稱，后面是變量類型。

3. 數(shù)字類型

二進制數(shù)、十進制數(shù)、十六進制數(shù)都可以用 number 類型來表示。

let decLiteral: number = 6
let goldenSection: number = 0.618
let hexLiteral: number = 0xf00d
let binaryLiteral: number = 0b1010
let octalLiteral: number = 0o744
let notANumber: number = NaN

4. 字符串類型

雙引號或者單引號表示字符串：

let protagonist: string = "Sherlock Holmes"
let partner: string = 'Dr. John Hamish Watson'

使用模板字符串：

let protagonist: string = 'Sherlock'
let sentence: string = `華生是${protagonist}的朋友、助手和室友。`

模板字符串使用反引號來代替普通字符串中的用雙引號和單引號。模板字符串可以包含特定語法 ${expression} 的占位符，占位符內(nèi)可以寫變量名，模板字符串會進行變量值的解析。

5. void 類型

當(dāng)一個函數(shù)沒有返回值時，可以將其返回值類型定義為 void：

function doNothing(): void {
  let a  = 10
}

聲明一個 void 類型的變量沒有什么用，因為你只能將它賦值為 undefined 和 null：

let nothing: void = undefined

6. null 類型和 undefined 類型

undefined 和 null 是所有類型的子類型。

一般項目是默認開啟 --strictNullChecks 檢測的，如果你將 tsconfig.json 中 strictNullChecks 選項設(shè)置為 false，下面這種操作不會報錯，不過盡量不要這么做：

let num: number = undefined
let list: number[] = undefined
let name: string = undefined

7. 數(shù)組類型

數(shù)組類型有兩種表示方法，第一種在元素類型后接上 []，表示由此類型元素組成的一個數(shù)組：

let list: number[] = [1, 2, 3]
let names: string[] = ['Sherlock', 'Watson', 'Mrs. Hudson']

另一種方式是使用數(shù)組泛型（泛型后續(xù)會單獨介紹），Array<元素類型>：

let list: Array<number> = [1, 2, 3]
let names: Array<string> = ['Sherlock', 'Watson', 'Mrs. Hudson']

混合各種元素類型：

let list: any[] = ['Sherlock', 1887]

推薦使用第一種數(shù)組類型的表示方法，書寫比較簡潔直觀。

8. any 類型

有時候接收來自用戶的輸入，我們是不能確定其變量類型的。這種情況下，我們不希望類型檢查器對這些值進行檢查，而是直接讓它們通過編譯階段的檢查，此時可以使用 any：

let input: any = 'nothing'

input = 0                   // ok
input = true                // ok
input = []                  // ok
input = null                // ok
input = Symbol('any')       // ok

如果一個數(shù)據(jù)是 any 類型，那么可以訪問它的任意屬性，即使這個屬性不存在：

let anything: any = 10

anything.eat()              // ok
anything.name               // ok
anything[0]                 // ok
new anything()              // ok
anything()                  // ok

從上面的例子中可以看到，any 類型幾乎可以做任何操作，這樣很容易編寫類型正確但是執(zhí)行異常的代碼。我們使用 TypeScript 就是為了代碼的健壯性，所以要盡量減少 any 的使用。

9. object 類型

object 表示非原始類型(non-primitive type)：

let obj: object

// 枚舉類型
enum TokenType {
  ACCESS = 'accessToken',
  REFRESH = 'refreshToken'
}

obj = TokenType
obj = [1, 2, 3]
obj = [1, 'string'] // 元組類型
obj = { a: 1 }

可以看到枚舉、數(shù)組、元組和普通對象都是 object 類型。

10. 容易混淆的點

1. TypeScript 中描述類型要用 小寫，比如 boolean、number、string等；
2. 大寫開頭的如 Boolean、Number、String 代表的是 JavaScript 的構(gòu)造函數(shù):

let a: Number = new Number('10') // a === 10 為 false
let b: number = Number('10') // b === 10 為 true

a instanceof Number // true
b instanceof Number // false

代碼解釋：

第 1 行，通過 new Number('10') 得到的是一個構(gòu)造函數(shù)，本質(zhì)是一個對象。

第 2 行，Number('10') 與 10 都是聲明一個數(shù)字 10 的方法，本質(zhì)就是一個數(shù)字。

第 4 - 5 行，instanceof 運算符用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上。a 是一個對象，它的 __proto__ 屬性指向該對象的構(gòu)造函數(shù)的原型對象 Number，所以為 true。b 是一個數(shù)字，所以為 false。

__proto__ 是非標(biāo)準(zhǔn)屬性，你也可以使用 Object.getPrototypeOf() 方法來訪問一個對象的原型：

a.__proto__ === Object.getPrototypeOf(a) // true

11. 小結(jié)

本小節(jié)介紹了 TypeScript 一些基本類型，需要記住的是：

• TypeScript 中描述類型要用 小寫。
• 不要濫用 any !