TypeScript 是 JAVAScript 的超集，一方面給動(dòng)態(tài)類型的 js 增加了類型校驗(yàn)，另一方面擴(kuò)展了 js 的各種功能。

原始數(shù)據(jù)類型

• 字符串
• 數(shù)值
• 布爾
• null
• undefined
• Symbol
• BigInt

let str: string = '周小黑'
let age: number = 18
let beautiful: boolean = true
let n: null = null
let u: undefiend = undefined
let s: Symbol = Symbol('1')
let int: BigInt = BigInt(10)

any、unknown、void、never

• any：任意類型，是一切類型的父類型，也是一切類型的子類型。會(huì)跳過類型檢查，和我們平時(shí)寫js一樣
• unknown：未知類型，是一切類型的父類型，但不是一切類型的子類型。比 any 更安全，比如聲明了一個(gè)對(duì)象為 unkonw 要讀取屬性或調(diào)用方法時(shí)需要先進(jìn)行具體類型判斷或用 as 進(jìn)行類型斷言，收窄類型后才能讀取
• void：沒有任何返回值的函數(shù)，聲明一個(gè) void 類型的變量沒有什么用，因?yàn)橹荒苜x值為 undefined 和 null(只在 --strictNullChecks 未指定時(shí))
• never：不存在值的類型

any、unknonwn是所有類型的父類型，null、undefined、never是所有類型的子類型

Object、object、{}

• Object：原始對(duì)象類型，支持所有類型，注意為非原始數(shù)據(jù)類型時(shí)不能訪問值的任何屬性
• object：普通對(duì)象類型，只能是非原始數(shù)據(jù)類型對(duì)象、數(shù)組、函數(shù)這些，我們不能訪問值的任何屬性
• {}：對(duì)象字面量，無自身屬性的對(duì)象類型，不能進(jìn)行屬性操作

let num: Object = 12
let girl: Object = { age: 18 }
console.log(girl.age) // 會(huì)報(bào)錯(cuò)

let arr: object = [1, 2, 3]
console.log(arr[0]) // 會(huì)報(bào)錯(cuò)
console.log(arr) // 可以正常運(yùn)行

let person: {} = {name: 'zhou'}
console.log(boy.name) // 會(huì)報(bào)錯(cuò)

// 可以正常運(yùn)行
let boy: {name: string} = {name: 'zhou'}
boy.name = '周'
console.log(boy)

注意需要訪問某個(gè)對(duì)象的屬性或方法時(shí)，應(yīng)該定義具體的屬性類型或通過 interface 接口定義類型，才能進(jìn)行屬性的讀取、賦值操作。

其他常用類型、DOM類型

• 其他類型：除了上面提到的一些類型，還有 Function、Date、RegExp、Error、Promise
• Array和Tuple類型：Tuple元組類型和數(shù)組類型類似，不過元組表示一個(gè)已知元素?cái)?shù)量和元素類型的數(shù)組(各元素的類型不必相同)
• Enum類型：枚舉類型
• DOM類型：Document、htmlElement、NodeList、Event、MouseEvent

interface、type

• interface：接口，只能定義對(duì)象結(jié)構(gòu)的數(shù)據(jù)類型，可以通過extends擴(kuò)展，重復(fù)定義會(huì)被合并
• type：類型別名，可以定義原始類型，可以通過&符號(hào)合并類型，不可以重復(fù)定義；除了類型還可以用來限制值；注意類型后面需要用 = 來寫，而 interface 則不用

兩個(gè)都可以用來定義類型，也比較類似，推薦優(yōu)先使用 interface。

聯(lián)合類型、交叉類型

• 聯(lián)合類型：用 | 表示聯(lián)合類型，相當(dāng)于或
• 交叉類型：用 & 合并多個(gè)類型，相當(dāng)于把多個(gè)類型合并到一起，可以用于合并多個(gè) interface 或 type

type Person = {
    name: string
    age: number | string
}

interface Man {
    money: number
}

let boy: Person & Man = {
    name: 'zhou',
    age: '18',
    money: 100
}

console.log(boy)

符號(hào)

• & 且
• | 或
• ! 非
• ?? 空值合并運(yùn)算符
• ?. 可選鏈操作符，用在獲取對(duì)象的深層屬性或方法前
• ? 加在類型上表示可選參數(shù)或者可選屬性，一般用在對(duì)象屬性或者函數(shù)參數(shù)上

interface Person {
    name: string,
    age?: number
}

let man: Person = {
    name: 'zhou'
}

function add(x: number, y?: number): number {
    return y ? (x + y) : x
}

add(10)
add(10, 12)

字面量

這個(gè)用來將變量的值限制成預(yù)定的，是對(duì)值得限定，看著有點(diǎn)像聯(lián)合類型（是對(duì)類型得限定）

let a: 10 | 'zhou' | [1, 2, 4]
// 也可以用 type 類型別名來寫成下面得形式
// type A = 10 | 'zhou' | [1, 2, 4]
// let a: A

a = [1, 2, 4]
a = false // Type 'false' is not assignable to type '"zhou" | 10 | [1, 2, 4]'.ts(2322)

class 類

• ts 支持面向?qū)ο蟮乃刑匦裕热纾侯悺⒔涌诘?/li>
• 類可以通過 implements 去實(shí)現(xiàn)接口 interface
• 修飾符：public / private / protected / abstract / static(js中也有)

泛型

泛型相當(dāng)于一個(gè)占位符，可以理解成函數(shù)參數(shù)，使用的時(shí)候傳進(jìn)來的是什么，在內(nèi)部就可以用用占位符去使用，一般多用于函數(shù)中，使用時(shí)用一對(duì)尖括號(hào)加上占位符，多用字母 T 占位。就是把定義的類型變量想象成一個(gè)函數(shù)，只不過參數(shù)部分用尖括號(hào)傳遞，使用的時(shí)候再用尖括號(hào)把具體的類型傳進(jìn)去

// 函數(shù)
function func<T>(arg: T): T {
    return arg
}

// interface 接口
interface Person<T> {
    name: string,
    age: number,
    custom: T
}
let man: Person<boolean> = {
    name: 'zhou',
    age: 18,
    custom: true
}

// 元組
type Ftype<T, U> = [number, T, boolean, U]
let fruits: Ftype<Function, string> = [1, () => {}, false, '水果']

內(nèi)置泛型工具

• Partial
• Required
• Readonly
• Pick
• Exclude
• Extract
• Omit
• Record
• ReturnType
• ...

關(guān)鍵字

extends

• js 中 class 類實(shí)現(xiàn)繼承
• ts 的 interface 接口實(shí)現(xiàn)繼承
• 判斷類型包含

as

類型斷言，將一個(gè)大范圍的類型收窄

in

遍歷，從多個(gè)類型中去遍歷出每個(gè)類型

keyof

ts 2.1 版本中引入，用于獲取某種類型中的所有鍵，返回的是聯(lián)合類型（跟我們用 Object.keys 獲取對(duì)象的所有屬性鍵類似，只不過 Object.keys 返回的是所有鍵名數(shù)組）。

獲取到類型的鍵后，我們就可以訪問到鍵對(duì)應(yīng)的類型：

interface Person {
    name: string,
    age: number
}

type Name = Person['name']
type P1 = Person['name' | 'age'] // string | number
// 上面的 P1 也就相當(dāng)于：
type P2 = Person[keyof Person] // string | number

typeof

• js 中判斷類型
• ts 中獲取一個(gè)變量的申明類型

infer

推斷的占位，當(dāng)某個(gè)類型不確定時(shí)，就可以暫時(shí)表示為 xx

interface、type、對(duì)象屬性多個(gè)中的符號(hào)

• interface 和 type 中多個(gè)可以用分號(hào)、逗號(hào)，也可以不加，也可以混用，不過團(tuán)隊(duì)開發(fā)中盡量統(tǒng)一成一種寫法
• 對(duì)象屬性多個(gè)只能用逗號(hào)

interface Person {
    name: string
    age: number;
    gender: string,
}

let man: Person = {
    name: 'zhou',
    age: 18,
    gender: '男'
}