JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明超詳細(xì)介紹
一、TypeScript 斷言
1.1 類型斷言
個(gè)人理解的斷言，就是斷定某一個(gè)值的類型,此時(shí)TypeScript以你所給出的值類型為準(zhǔn)，而非TypeScrip的推論
在一些復(fù)雜的類型聲明 變成具體實(shí)現(xiàn)時(shí)往往用得到 并且避免很多類型過于復(fù)雜的情況
類型斷言有兩種形式：
1.尖括號語法
const someValue: any = "this is a string";
let strLength: number = (<{a:number}>someValue).a;2.as 語法
這個(gè)用的比較多
let someValue = "this is a string" as string; let strLength: number = someValue.length;
1.2 非空斷言
TypeScript 提供了一個(gè)特殊的語法，可以在不做任何檢查的情況下，從類型中移除 null 和 undefined，這就是在任意表達(dá)式后面寫上 ! ，這是一個(gè)有效的類型斷言，表示它的值不可能是 null 或者 undefined：
1.3 確定賦值斷言
在 TypeScript 2.7 版本中引入了確定賦值斷言，即允許在實(shí)例屬性和變量聲明后面放置一個(gè) ! 號，從而告訴 TypeScript 該屬性會被明確地賦值。為了更好地理解它的作用，我們來看個(gè)具體的例子：
let x: number; console.log(2 * x);
很明顯會有報(bào)錯(cuò)，因?yàn)樵谫x值前使用變量，要解決該問題，我們可以使用確定賦值斷言：
let x!: number; console.log(2 * x);
二、類型守衛(wèi)
類型保護(hù)是可執(zhí)行運(yùn)行時(shí)檢查的一種表達(dá)式，用于確保該類型在一定的范圍內(nèi)。 換句話說，類型保護(hù)可以保證一個(gè)字符串是一個(gè)字符串，盡管它的值也可以是一個(gè)數(shù)值。
如
//
function add(padding: number | string) {
return padding + 10; //運(yùn)算符“+”不能應(yīng)用于類型“string | number”和“number”。
}
類型保護(hù)與特性檢測并不是完全不同，其主要思想是嘗試檢測屬性、方法或原型，以確定如何處理值。目前主要有四種的方式來實(shí)現(xiàn)類型保護(hù)：
2.1 in關(guān)鍵字
js中的in 關(guān)鍵字 如果指定的屬性在指定的對象或其原型鏈中，則 in 運(yùn)算符返回 true。
const car = { make: 'Honda', model: 'Accord', year: 1998 };
console.log('make' in car); //true
delete car.make;
if ('make' in car === false) {
car.make = 'Suzuki';
}
console.log(car.make); //Suzukitypescript也是類似的
interface Admin {
name: string;
privileges: string[];
}
interface Employee {
name: string;
startDate: Date;
}
type UnknownEmployee = Employee | Admin;
function printEmployeeInformation(emp: UnknownEmployee) {
console.log("Name: " + emp.name);
if ("privileges" in emp) {
console.log("Privileges: " + emp.privileges);
}
if ("startDate" in emp) {
console.log("Start Date: " + emp.startDate);
}
}2.2 typeof關(guān)鍵字
// “number”， “string”， “boolean” ， “symbol”
function padLeft(value: string, padding: string | number) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}typeof 類型保護(hù)只支持兩種形式：typeof v === "typename" 和 typeof v !== typename，"typename" 必須是 "number"， "string"， "boolean" 或 "symbol"。 但是 TypeScript 并不會阻止你與其它字符串比較，語言不會把那些表達(dá)式識別為類型保護(hù)。
2.3 instanceof 關(guān)鍵字
當(dāng)聯(lián)合類型中使用的是 class 而不是 interface 時(shí)，instanceof 語法就派上用場了，通過 instanceof 語法可以區(qū)分不同的 class 類型。
class Bird {
// 獨(dú)有方法
fly() {};
// 共有方法
layEggs() {};
}
class Fish {
// 獨(dú)有方法
swim() {};
// 共有方法
layEggs() {};
}
function getSmallPet(): Fish | Bird {
// ...
}
let pet = getSmallPet();
pet.layEggs(); // 正常
// 使用 in 語法進(jìn)行
if (pet instanceof Bird) {
pet.fly()
} else {
pet.swim()
} 2.4 **自定義類型保護(hù)的類型謂詞
function isNumber(x: any): x is number {
return typeof x === "number";
}
function isString(x: any): x is string {
return typeof x === "string";
}
function isFish(pet: Fish | Bird): pet is Fish {
return (<Fish>pet).swim !== undefined;
}
if (pagination.pageSize != _pagination.pageSize && (<ListObjProps<T, K>>listProps).pagination?.pageSize) {
localStorage.setItem(FeManagePageSize, _pagination.pageSize?.toString() || '10')
}
三、聯(lián)合類型和類型別名
3.1 聯(lián)合類型
聯(lián)合類型通常與 null 或 undefined 一起使用：
const abc = (name: string | undefined) => {
};
例如，這里 name 的類型是 string | undefined 意味著可以將 string 或 undefined 的值傳遞給abc 函數(shù)。
abc("semlinker");
abc(undefined);
通過這個(gè)示例，你可以憑直覺知道類型 A 和類型 B 聯(lián)合后的類型是同時(shí)接受 A 和 B 值的類型。此外，對于聯(lián)合類型來說，你可能會遇到以下的用法：
let num: 1 | 2 = 1; type Type = 'click' | 'doubleClick' | 'mousemove';
3.2 可辨識聯(lián)合
TypeScript 可辨識聯(lián)合（Discriminated Unions）類型，也稱為代數(shù)數(shù)據(jù)類型或標(biāo)簽聯(lián)合類型。它包含 3 個(gè)要點(diǎn)：可辨識、聯(lián)合類型和類型守衛(wèi)。
這種類型的本質(zhì)是結(jié)合聯(lián)合類型和字面量類型的一種類型保護(hù)方法。如果一個(gè)類型是多個(gè)類型的聯(lián)合類型，且多個(gè)類型含有一個(gè)公共屬性，那么就可以利用這個(gè)公共屬性，來創(chuàng)建不同的類型保護(hù)區(qū)塊。
1. 可辨識
可辨識要求聯(lián)合類型中的每個(gè)元素都含有一個(gè)單例類型屬性，比如：
enum CarTransmission {
Automatic = 200,
Manual = 300
}
interface Motorcycle {
vType: "motorcycle";
make: number;
}
interface Car {
vType: "car";
transmission: CarTransmission
}
interface Truck {
vType: "truck";
capacity: number;
}在上述代碼中，我們分別定義了 Motorcycle、 Car 和 Truck 三個(gè)接口，在這些接口中都包含一個(gè) vType 屬性，該屬性被稱為可辨識的屬性，而其它的屬性只跟特性的接口相關(guān)。
2. 聯(lián)合類型
基于前面定義了三個(gè)接口，我們可以創(chuàng)建一個(gè) Vehicle 聯(lián)合類型：
type Vehicle = Motorcycle | Car | Truck;
現(xiàn)在我們就可以開始使用 Vehicle 聯(lián)合類型，對于 Vehicle 類型的變量，它可以表示不同類型的車輛。
3. 類型守衛(wèi)
下面我們來定義一個(gè) evaluatePrice 方法，該方法用于根據(jù)車輛的類型、容量和評估因子來計(jì)算價(jià)格，具體實(shí)現(xiàn)如下：
const EVALUATION_FACTOR = Math.PI;
function evaluatePrice(vehicle: Vehicle) {
return vehicle.capacity * EVALUATION_FACTOR;
}
const myTruck: Truck = { vType: "truck", capacity: 9.5 };
evaluatePrice(myTruck);
原因是在 Motorcycle 接口中，并不存在 capacity 屬性，而對于 Car 接口來說，它也不存在 capacity 屬性。那么，現(xiàn)在我們應(yīng)該如何解決以上問題呢？這時(shí)，我們可以使用類型守衛(wèi)。下面我們來重構(gòu)一下前面定義的 evaluatePrice 方法，重構(gòu)后的代碼如下：
function evaluatePrice(vehicle: Vehicle) {
switch(vehicle.vType) {
case "car":
return vehicle.transmission * EVALUATION_FACTOR;
case "truck":
return vehicle.capacity * EVALUATION_FACTOR;
case "motorcycle":
return vehicle.make * EVALUATION_FACTOR;
}
}
在以上代碼中，我們使用 switch 和 case 運(yùn)算符來實(shí)現(xiàn)類型守衛(wèi)，從而確保在 evaluatePrice 方法中，我們可以安全地訪問 vehicle 對象中的所包含的屬性，來正確的計(jì)算該車輛類型所對應(yīng)的價(jià)格。
3.3 類型別名
類型別名用來給一個(gè)類型起個(gè)新名字。
type Message = string | string[];
let greet = (message: Message) => {
};
ACTOR;
}
}在以上代碼中，我們使用 switch 和 case 運(yùn)算符來實(shí)現(xiàn)類型守衛(wèi)，從而確保在 evaluatePrice 方法中，我們可以安全地訪問 vehicle 對象中的所包含的屬性，來正確的計(jì)算該車輛類型所對應(yīng)的價(jià)格。
到此這篇關(guān)于JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明超詳細(xì)介紹的文章就介紹到這了,更多相關(guān)JS斷言與類型守衛(wèi)及聯(lián)合聲明內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要分享了canvas繪制萬花筒效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
javascript獲取url上某個(gè)參數(shù)的方法
獲取url上的某個(gè)參數(shù)的方法有很多，在本文為大家介紹下使用javascript是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過2013-11-11
Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果
這篇文章主要介紹了Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
這篇文章給大家分享了java線程中斷的辦法以及相關(guān)知識點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2018-07-07
js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能
本文主要介紹了js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能的示例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)動態(tài)背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了微信小程序3D輪播實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JS target與currentTarget區(qū)別說明
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的，而當(dāng)處于捕獲和冒泡階段的時(shí)候，target指向被單擊的對象而currentTarget指向當(dāng)前事件活動的對象（一般為父級）。2011-08-08