TypeScript如何開啟嚴(yán)格空值檢查
TypeScript
里,JS中的基本數(shù)據(jù)類型undefined和null兩者各自有自己的類型分別叫做undefined和null。let u: undefined = undefined;let n: null = null;默認(rèn)情況下null和undefined是所有類型的子...
let u: undefined = undefined; let n: null = null;
默認(rèn)情況下null
和undefined
是所有類型的子類型。 就是說你可以把null
和undefined
賦值給number
類型的變量。
例如下面的代碼,在TS中是完全可以執(zhí)行的。
let userName: string; userName = "搞前端的半夏"; // OK userName = null; // OK userName = undefined; // OK let age: number; age = 18; // OK age = null; // OK age = undefined; // OK let isBoy: boolean; isBoy = true; // OK isBoy = false; // OK isBoy = null; // OK isBoy = undefined; // OK
在編程過程成空指針是最常見的bug之一,但是在TypeScript中我們無法使用具體的類型來表示特定的變量不能為空!幸運(yùn)的是,TypeScript 2.0 解決了這個(gè)問題!。
一、strictNullChecks
TypeScript 2.0 增加了對(duì)不可為空類型的支持。有一種新的嚴(yán)格空值檢查模式,他提供了strictNullChecks
來限制對(duì)空值的檢查??梢酝ㄟ^在命令行上添加--strictNullChecks
參數(shù)來啟功嚴(yán)格空值檢查。也可以在項(xiàng)目的tsconfig.json文件中啟用strictNullChecks
編譯器選項(xiàng)。
在TS中,為了各版本的兼容,strictNullChecks的默認(rèn)值是false
{ "compilerOptions": { "strictNullChecks": true // ... } }
在TS官方的演練場(chǎng)中你可以勾選strictNullChecks來啟用嚴(yán)格空值檢查!
注意點(diǎn)1
在嚴(yán)格空值檢查模式下,null和undefined無法賦值給其他類型的變量。
例如下面的代碼在*strictNullChecks=true下,是無法編譯通過的。
let userName: string; userName = "搞前端的半夏"; // OK userName = null; // OK userName = undefined; // OK
注意點(diǎn)2
嚴(yán)格空值檢查并不意味著變量的類型無法設(shè)置為null和undefined
例如下面的代碼在*strictNullChecks=true下,正常編譯通過的。
let userName: null; userName = null; let age: undefined; age = undefined;
二、變量如何可以為空
在正常的編程中,我們并不會(huì)直接將一個(gè)變量的類型設(shè)置為null或者undefined,例如username,我們通常設(shè)置為string類型。
如果我們想要username可以接受空值我們?cè)撛趺崔k呢?
1. 使用聯(lián)合類型
聯(lián)合類型(Union Types)表示取值可以為多種類型中的一種。
對(duì)于下面的代碼,userName
可以接受null
類型的值。但是無法接受undefined的值
let userName: string | null; userName = "搞前端的半夏"; // OK userName = null; // OK userName = undefined; // Error
2. a? 默認(rèn)undefined
聯(lián)合類型可以在Object中使用
type User = { name: string ; age:number | undefined };
這里我們?cè)O(shè)置age的類型為number
和undefined
。
下面的兩種用法都是正確的。
let user1: User = { name: "搞前端的半夏", age: undefined }; let user2: User = { name: "搞前端的半夏", age: 18 };
如果我們想要下面的效果,不需要手動(dòng)給age賦值
let user2: User = { name: "搞前端的半夏"};
此時(shí)我們就需要用到**?**來使屬性成為可選,這樣我們就可以完全省略age
屬性的定義。
type User = { name: string ; age?:number };
請(qǐng)注意,在這種情況下:undefined
類型會(huì)自動(dòng)添加到聯(lián)合類型中。因此,以下所有賦值都是正確的:
let user1: User = { name: "搞前端的半夏", age: undefined }; let user2: User = { name: "搞前端的半夏", age: 18 }; let user3: User = { name: "搞前端的半夏"};
三、安全檢查
1. 變量可空的安全檢查
如果變量的類型包含null
or undefined
,則訪問任何屬性都會(huì)產(chǎn)生編譯時(shí)錯(cuò)誤:
function UserNameLength(userName: string | null) { return userName.length; }
所以在訪問屬性之前,必須要先判斷變量的值是否為空!
function UserNameLength(userName: string | null) { if (userName === null) { return 0; } return userName.length; }
四、可空類型的函數(shù)調(diào)用
在JS中支持回調(diào)函數(shù),所以函數(shù)的參數(shù)會(huì)可能是函數(shù)類型,
function fn(callback?: () => void) { callback(); }
如果該參數(shù)是可選的函數(shù)類型,TS會(huì)將該參數(shù)加上undefined類型。
那么這個(gè)函數(shù)的我們?cè)谡{(diào)用函數(shù)的時(shí)候會(huì)報(bào)錯(cuò)!
類似于在訪問屬性之前檢查對(duì)象,我們需要首先檢查函數(shù)是否具有非空值:
function fn(callback?: () => void) { if (callback) { callback(); } }
到此這篇關(guān)于TypeScript如何開啟嚴(yán)格空值檢查的文章就介紹到這了,更多相關(guān)TypeScript嚴(yán)格空值檢查內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)兼容性好,帶緩沖的動(dòng)感網(wǎng)頁右鍵菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)兼容性好,帶緩沖的動(dòng)感網(wǎng)頁右鍵菜單效果,可實(shí)現(xiàn)帶有彈性效果并且能夠自定義鼠標(biāo)事件的右鍵菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09微信小程序?qū)崿F(xiàn)簡(jiǎn)單input正則表達(dá)式驗(yàn)證功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單input正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式分析了微信小程序input組件事件綁定及正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2017-11-11JS實(shí)現(xiàn)上下左右對(duì)稱的九九乘法表
九九乘法表使用很多種語言都可以實(shí)現(xiàn),本文給大家介紹js使用for、while循環(huán)來完成四種對(duì)稱的九九乘法表,對(duì)九九乘法表需要的朋友參考下2016-02-02使用 UniApp 實(shí)現(xiàn)小程序的微信登錄功能
這篇文章主要介紹了使用 UniApp 實(shí)現(xiàn)小程序的微信登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會(huì)跳過稀疏數(shù)組中缺少的元素,它的返回?cái)?shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關(guān)知識(shí),需要的朋友參考下2018-02-02