Typescript中的as、問號與感嘆號詳解
1、as關鍵字表示斷言
在Typescript中,表示斷言有兩種方式。一種是擴號表示法:
let someValue: any = "this is a string"; let strLength: number = (someValue).length;
另一種使用as關鍵字:
let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;
2、問號(?)用於屬性定義
問號表示可選的屬性,一般用於屬性定義,如,用於介面時:
interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig) { if (config.color) { console.log(config); } }
可選屬性的含義是:使用這個屬性時,要麼這個屬性名不存在,要麼必須符合屬性的型別定義
比如上述createSquare函式編譯時會報error錯誤:
error TS2551: Property 'clor' does not exist on type 'SquareConfig'.
如果修改createSquare,將config.color的值改為undefined,會怎樣?
interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig) { config.color = undefined; if (config.color) { console.log(config); } }
這時並沒有編譯報錯!明明config.color定義的是string型別呀?
即便是新增–strictNullChecks進行編譯,也不會報錯。可見,可選屬性所定義的型別,並沒有被typescript嚴格地對待,預設並不檢查undefined。需要注意的是,將上述undefined改成null時,普通編譯也不報http://www.cppcns.com錯,–strictNullChecks編譯會報如下錯誤:
error TS2322: Type 'null' is not assignable to type 'string | undefined'
從這句報錯中,我們可以得出這樣的結論:可選屬性等價於一個union型別,union了undefined;不加–strictNullChecks編譯時,null可以賦值給undfined型別。也就是說,SquareConfig的定義與下面的程式碼等價:
interface SquareConfig { color: string|undefined; width: number|undefined; }
下面比較一下可選屬性與正常屬性。再次修改createSquare,將color屬性修改為正常屬性。
interface SquareConfig { color: string; width?: number; } function createSquare(config: SquareConfig) { config.color = undefined; if (config.color) { console.log(config); } }
以–strictNullChecks編譯,報錯了:
error TS2322: Type ‘undefined' is not assignable to type ‘string'
這個比較也驗證了上述的結論。
問號(?)用於屬性讀取
問號用於屬性讀取,主要有兩個場景:一是讀取陣列元素(如下面的node[i]),二是讀取不確定的型別如any,union,可選型別(如node[i].data)等。如下例,儲存為index.ts:
interface VNodeData { class?: string; } interface VNode { sel?: string; data?: VNodeData; } function test(node: VNode[]) { let i = 0; var b = node[i].data.class; if(b !== undefined) { console.log(1); } }
用tsc --strictNullChecks index.ts,報錯:
error TS2532: Object is possibly 'undefined'
下面將一一展示這一行程式碼var b = node[i].data.class;修改改後的效果。
1、修改為var b = node[i]?.data.class;,然後編譯。報錯:
Object is possibly 'undefined'
2、修改為var b = node[i]?.data?.class;,然後編譯。編譯通過,檢視編譯後的對應程式碼為:
function test(node) { var _a,_b; var i = 0; var b = (_b = (_a = node[i]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b["class"]; // var b = node[i].data.class;//報錯 if (b !== undefined) { console.log(1); } }
var b = node[i]?表示,如果node[i]的值為null或者undefined,則b等於undefined,否則b=node[i]。
3、修改為var b = (node[i] as VNode).data?.class;,然後編譯。編譯通過,檢視編譯後的對應程式碼為:
function test(node) { var _a; var i = 0; var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"]; // var b = node[i]?.data?.class; // var b = node[i].data.class;//報錯 if (b !== undefined) { console.log(1); } }
此時,使用node[i]時,Typescript編譯器將不再對其判斷是否為null和undefined。即:var b = node[i] as VNode直接客棧會被編成var b = node[i]。
4、修改為var b = node[i]!.data?.class,然後編譯。編譯通過,檢視編譯後的對應程式碼為:
function test(node) { var _a; var i = 0; var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"]; // var b = (node[i] as VNode).data?.class // var b = node[i]?.data?.class; // var b = node[i].data.class;//報錯 if (b !== undefined) { console.log(1); } }
可見,3和4的編譯後代碼完全一樣,!的作用此時與as是等價的。然而,!只是用來判斷null和undefined;as則可用於變更(縮小或者放大都可以)型別檢測範圍,僅當as後面跟的型別是一個非空型別時,兩者才等價。如下例中,不能將as用法改為!。
interface Cat { action: string; } interface Dog { action: string; } type Animal = Cat | Dog; let action:Animal = {} as Cat;
結論
1、as和!用於屬性的讀取,都可以縮小型別檢查範圍,都做判空用途時是等價的。只是!具體用於告知編譯器此值不可能為空值(null和undefined),而as不限於此。
2、?可用於屬性的定義和讀取,讀取時告訴編譯器此值可能為空值(null和undefined),需要做判斷。
到此這篇關於Typescript中的as、問號與感嘆號詳解的文章就介紹到這了,更多相關Typescript中as、問號與感嘆號內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!