TypeScript - 類型系統(tǒng)
[TOC]
學(xué)習(xí)目標(biāo)
- 了解類型系統(tǒng)
- 類型標(biāo)注
- 類型檢測(cè)的好處
- 使用場(chǎng)景
- 掌握常用的類型標(biāo)注的使用
類型系統(tǒng)
簡(jiǎn)單來說類型系統(tǒng)包含：
- 類型標(biāo)注（簽名）
- 類型檢測(cè)
類型標(biāo)注
類型標(biāo)注就是給數(shù)據(jù)（變量碑定、函數(shù)袍啡、類等）添加類型說明
類型標(biāo)注語(yǔ)法：
變量: 標(biāo)注類型
let 變量: 數(shù)據(jù)類型;
類型檢測(cè)
有了類型標(biāo)注鼓拧，編譯器會(huì)在編譯過程中根據(jù)標(biāo)注的類型進(jìn)行檢測(cè)析砸，使數(shù)據(jù)的使用更安全代虾，幫助我們減少錯(cuò)誤
同時(shí)配合 編輯器/IDE 栈戳，類型標(biāo)注還能提供更加強(qiáng)大和友好的智能提示
<span style="color:red">注意：類型系統(tǒng)檢測(cè)的是類型安聘，而不是具體值华糖，即 數(shù)據(jù)是否與標(biāo)注的類型一致</span>
標(biāo)注類型有哪些麦向？
- 基礎(chǔ)類型
- 空和未定義類型
- 對(duì)象類型
- 數(shù)組類型
- 元組類型
- 枚舉類型
- 無(wú)值類型
- Never類型
- 任意類型
- 未知類型（Version3.0 Added）
基礎(chǔ)類型
基礎(chǔ)類型包含：string，number客叉，boolean
標(biāo)注語(yǔ)法
變量: string;
變量: number;
變量: boolean;
let title: string = '開課吧';
let n: number = 100;
let isOk: boolean = true;
title = 100; //錯(cuò)誤
空和未定義類型
因?yàn)樵?Null 和 Undefined 這兩種類型有且只有一個(gè)值诵竭，在標(biāo)注一個(gè)變量為 Null 和 Undefined 類型，那就表示該變量不能修改了
默認(rèn)情況下 null 和 undefined 是所有類型的子類型兼搏。 就是說你可以把 null 和 undefined 其它類型的變量
如果一個(gè)變量聲明了卵慰，但是未賦值，那么該變量的值為 undefined佛呻，但是如果它同時(shí)也沒有標(biāo)注類型的話裳朋，默認(rèn)類型為 any，any 類型后面有詳細(xì)說明
let un: undefined;
un = 1; // 錯(cuò)誤
let nul: null;
nul = 1; //錯(cuò)誤
let a: string = '開課吧';
a = null; // 可以
a = undefined; // 可以
小技巧：指定 strictNullChecks 配置為 true吓著，可以有效的檢測(cè) null 值數(shù)據(jù)鲤嫡，避免很多常見問題送挑，建議對(duì)可能出現(xiàn)的 null 和 undefined 進(jìn)行容錯(cuò)處理，使程序更加嚴(yán)謹(jǐn)
let ele = document.querySelector('#box'); if (ele) { ele.style.display = 'none'; }
對(duì)象類型
Object 類型表示非原始值類型
標(biāo)注語(yǔ)法
變量: object
基于對(duì)象字面量的類型標(biāo)注
let ot: {x: number, y: string} = {
x: 1,
y: 'zmouse'
};
針對(duì)對(duì)象這種特殊而有復(fù)雜的數(shù)據(jù)暖眼，TypeScript 有許多的方式來進(jìn)行類型標(biāo)注
內(nèi)置對(duì)象類型
除了 Object 類型惕耕，在 JavaScript 中還有很多的內(nèi)置對(duì)象，如：Date罢荡，標(biāo)注如下：
變量: 內(nèi)置對(duì)象構(gòu)造函數(shù)名
let d1: Date = new Date();
let set1: Set = new Set();
包裝對(duì)象
這里說的包裝對(duì)象其實(shí)就是 JavaScript 中的 String赡突、Number、Boolean区赵，我們知道 string 類型 和 String 類型并不一樣惭缰，在 TypeScript 中也是一樣
let a: string;
a = '1';
a = new String('1'); // 錯(cuò)誤
let b: String;
b = new String('2');
b = '2'; // 正確
數(shù)組類型
TypeScript 中的數(shù)組存儲(chǔ)的類型必須一致，所以在標(biāo)注數(shù)組類型的時(shí)候笼才，同時(shí)要標(biāo)注數(shù)組中存儲(chǔ)的數(shù)據(jù)類型
標(biāo)注語(yǔ)法
變量: 類型[]
數(shù)組還有另外一種基于 泛型 的標(biāo)注
變量: Array<類型>
let arr1: string[] = [];
arr1.push('開課吧'); // 正確
arr1.push(1); // 錯(cuò)誤
let arr2: Array<number> = [];
arr2.push(100); // 正確
arr2.push('開課吧'); // 錯(cuò)誤
元組類型
元組類似數(shù)組漱受，但是存儲(chǔ)的元素類型不必相同，但是需要注意：
- 初始化數(shù)據(jù)的個(gè)數(shù)以及對(duì)應(yīng)位置標(biāo)注類型必須一致
- 越界數(shù)據(jù)必須是元組標(biāo)注中的類型之一（標(biāo)注越界數(shù)據(jù)可以不用對(duì)應(yīng)順序 - 聯(lián)合類型）
標(biāo)注語(yǔ)法
變量: [類型一, 類型二,...]
let data1: [string, number] = ['開課吧', 100];
data1.push(100); // 正確
data1.push('100'); // 正確
data1.push(true); // 錯(cuò)誤
注意：未開啟 strictNullChecks: true 會(huì)使用 undefined 進(jìn)行初始化
枚舉類型
枚舉的作用組織收集一組關(guān)聯(lián)數(shù)據(jù)的方式
標(biāo)注語(yǔ)法
enum 枚舉名稱 { key1=value, key2=value2 }
- key 不能是數(shù)字
- value 可以是數(shù)字骡送，稱為 數(shù)字類型枚舉昂羡，也可以是字符串，稱為 字符串類型枚舉摔踱，但不能是其它值虐先，默認(rèn)為數(shù)字：0
- 第一個(gè)枚舉值或者前一個(gè)枚舉值為數(shù)字時(shí)，可以省略賦值派敷，其值為 前一個(gè)數(shù)字值 + 1
數(shù)字類型枚舉
enum HTTP_CODE {
OK = 200,
NOT_FOUND = 404
};
HTTP_CODE.OK //200
字符串類型枚舉
enum URLS {
USER_REGISETER = '/user/register',
USER_LOGIN = '/user/login'
}
無(wú)值類型
表示沒有任何數(shù)據(jù)的類型蛹批，通常用于標(biāo)注無(wú)返回值函數(shù)的返回值類型，函數(shù)默認(rèn)標(biāo)注類型位：void
標(biāo)注語(yǔ)法
變量: void
function fn():void {
// 沒有 return
}
Never類型
當(dāng)一個(gè)函數(shù)永遠(yuǎn)不可能執(zhí)行 return 的時(shí)候篮愉，返回的就是 never 腐芍，與 void 不同，void 是執(zhí)行了 return试躏， 只是沒有值猪勇，never 是不會(huì)執(zhí)行 return，比如拋出錯(cuò)誤颠蕴，導(dǎo)致函數(shù)終止執(zhí)行
function fn(): never {
throw new Error('error');
}
- never 類型是所有其它類型的子類
- 其它不能賦值給 never 類型泣刹，即使是 any
任意類型
有的時(shí)候，我們并不確定這個(gè)值到底是什么類型或者不需要對(duì)該值進(jìn)行類型檢測(cè)犀被，就可以標(biāo)注為 any 類型
- 任何值都可以賦值給 any 類型
- any 類型也可以賦值給任意類型
- any 類型有任意屬性和方法
標(biāo)注語(yǔ)法
變量: any
注意：標(biāo)注為 any 類型项玛，也意味著放棄對(duì)該值的類型檢測(cè)，同時(shí)放棄 IDE 的智能提示
小技巧：指定 noImplicitAny 配置為 true弱判，當(dāng)函數(shù)參數(shù)出現(xiàn)隱含的 any 類型時(shí)報(bào)錯(cuò)
未知類型
unknow襟沮，3.0 版本中新增，屬于安全版的 any，但是與 any 不同的是：
- unknow 僅能賦值給 unknow开伏、any
- unknow 沒有任何屬性和方法
標(biāo)注語(yǔ)法
變量: unknow;
函數(shù)類型
在 JavaScript 中函數(shù)是一等公民的存在膀跌，在 TypeScript 也是如此，同樣的固灵，函數(shù)也有自己的類型標(biāo)注格式
函數(shù)名稱( 參數(shù)1: 類型, 參數(shù)2: 類型... ): 返回值類型;
function add(x: number, y: number): number {
return x + y;
}
總結(jié)
- 類型標(biāo)注語(yǔ)法
- 基礎(chǔ)類型標(biāo)注
- 字符串捅伤、數(shù)字、布爾值巫玻、空丛忆、未定義
- 非基礎(chǔ)類型標(biāo)注
- 對(duì)象、數(shù)組
- 特殊類型
- 元組仍秤、枚舉熄诡、無(wú)值類型、Never類型诗力、任意類型凰浮、未知類型
- 包裝對(duì)象
