TypeScript - 類型系統(tǒng)

TypeScript - 類型系統(tǒng)

[TOC]

學(xué)習(xí)目標(biāo)

  • 了解類型系統(tǒng)
    • 類型標(biāo)注
    • 類型檢測的好處
    • 使用場景
  • 掌握常用的類型標(biāo)注的使用

類型系統(tǒng)

簡單來說類型系統(tǒng)包含：

  • 類型標(biāo)注（簽名）
  • 類型檢測

類型標(biāo)注

類型標(biāo)注就是給數(shù)據(jù)（變量、函數(shù)、類等）添加類型說明

類型標(biāo)注語法：

變量: 標(biāo)注類型

let 變量: 數(shù)據(jù)類型;

類型檢測

有了類型標(biāo)注，編譯器會(huì)在編譯過程中根據(jù)標(biāo)注的類型進(jìn)行檢測，使數(shù)據(jù)的使用更安全，幫助我們減少錯(cuò)誤

同時(shí)配合 編輯器/IDE ，類型標(biāo)注還能提供更加強(qiáng)大和友好的智能提示

<span style="color:red">注意：類型系統(tǒng)檢測的是類型，而不是具體值，即 數(shù)據(jù)是否與標(biāo)注的類型一致</span>

標(biāo)注類型有哪些？

  • 基礎(chǔ)類型
  • 空和未定義類型
  • 對(duì)象類型
  • 數(shù)組類型
  • 元組類型
  • 枚舉類型
  • 無值類型
  • Never類型
  • 任意類型
  • 未知類型（Version3.0 Added）

基礎(chǔ)類型

基礎(chǔ)類型包含：string，number，boolean

標(biāo)注語法

變量: 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，可以有效的檢測 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)注語法

變量: 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)注語法

變量: 類型[]

數(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)注語法

變量: [類型一, 類型二,...]

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)注語法

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'
}

無值類型

表示沒有任何數(shù)據(jù)的類型，通常用于標(biāo)注無返回值函數(shù)的返回值類型，函數(shù)默認(rèn)標(biāo)注類型位：void

標(biāo)注語法

變量: 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)行類型檢測，就可以標(biāo)注為 any 類型

  • 任何值都可以賦值給 any 類型
  • any 類型也可以賦值給任意類型
  • any 類型有任意屬性和方法

標(biāo)注語法

變量: any

注意：標(biāo)注為 any 類型，也意味著放棄對(duì)該值的類型檢測，同時(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)注語法

變量: 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)注語法
  • 基礎(chǔ)類型標(biāo)注
    • 字符串、數(shù)字、布爾值、空、未定義
  • 非基礎(chǔ)類型標(biāo)注
    • 對(duì)象、數(shù)組
  • 特殊類型
    • 元組、枚舉、無值類型、Never類型、任意類型、未知類型
  • 包裝對(duì)象
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容