TypeScript如何開啟嚴格空值檢查
TypeScript
里,JS中的基本數(shù)據類型undefined和null兩者各自有自己的類型分別叫做undefined和null。let u: undefined = undefined;let n: null = null;默認情況下null和undefined是所有類型的子...
let u: undefined = undefined; let n: null = null;
默認情況下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中我們無法使用具體的類型來表示特定的變量不能為空!幸運的是,TypeScript 2.0 解決了這個問題!。
一、strictNullChecks
TypeScript 2.0 增加了對不可為空類型的支持。有一種新的嚴格空值檢查模式,他提供了strictNullChecks
來限制對空值的檢查??梢酝ㄟ^在命令行上添加--strictNullChecks
參數(shù)來啟功嚴格空值檢查。也可以在項目的tsconfig.json文件中啟用strictNullChecks
編譯器選項。
在TS中,為了各版本的兼容,strictNullChecks的默認值是false
{ "compilerOptions": { "strictNullChecks": true // ... } }
在TS官方的演練場中你可以勾選strictNullChecks來啟用嚴格空值檢查!
注意點1
在嚴格空值檢查模式下,null和undefined無法賦值給其他類型的變量。
例如下面的代碼在*strictNullChecks=true下,是無法編譯通過的。
let userName: string; userName = "搞前端的半夏"; // OK userName = null; // OK userName = undefined; // OK
注意點2
嚴格空值檢查并不意味著變量的類型無法設置為null和undefined
例如下面的代碼在*strictNullChecks=true下,正常編譯通過的。
let userName: null; userName = null; let age: undefined; age = undefined;
二、變量如何可以為空
在正常的編程中,我們并不會直接將一個變量的類型設置為null或者undefined,例如username,我們通常設置為string類型。
如果我們想要username可以接受空值我們該怎么辦呢?
1. 使用聯(lián)合類型
聯(lián)合類型(Union Types)表示取值可以為多種類型中的一種。
對于下面的代碼,userName
可以接受null
類型的值。但是無法接受undefined的值
let userName: string | null; userName = "搞前端的半夏"; // OK userName = null; // OK userName = undefined; // Error
2. a? 默認undefined
聯(lián)合類型可以在Object中使用
type User = { name: string ; age:number | undefined };
這里我們設置age的類型為number
和undefined
。
下面的兩種用法都是正確的。
let user1: User = { name: "搞前端的半夏", age: undefined }; let user2: User = { name: "搞前端的半夏", age: 18 };
如果我們想要下面的效果,不需要手動給age賦值
let user2: User = { name: "搞前端的半夏"};
此時我們就需要用到**?**來使屬性成為可選,這樣我們就可以完全省略age
屬性的定義。
type User = { name: string ; age?:number };
請注意,在這種情況下:undefined
類型會自動添加到聯(lián)合類型中。因此,以下所有賦值都是正確的:
let user1: User = { name: "搞前端的半夏", age: undefined }; let user2: User = { name: "搞前端的半夏", age: 18 }; let user3: User = { name: "搞前端的半夏"};
三、安全檢查
1. 變量可空的安全檢查
如果變量的類型包含null
or undefined
,則訪問任何屬性都會產生編譯時錯誤:
function UserNameLength(userName: string | null) { return userName.length; }
所以在訪問屬性之前,必須要先判斷變量的值是否為空!
function UserNameLength(userName: string | null) { if (userName === null) { return 0; } return userName.length; }
四、可空類型的函數(shù)調用
在JS中支持回調函數(shù),所以函數(shù)的參數(shù)會可能是函數(shù)類型,
function fn(callback?: () => void) { callback(); }
如果該參數(shù)是可選的函數(shù)類型,TS會將該參數(shù)加上undefined類型。
那么這個函數(shù)的我們在調用函數(shù)的時候會報錯!
類似于在訪問屬性之前檢查對象,我們需要首先檢查函數(shù)是否具有非空值:
function fn(callback?: () => void) { if (callback) { callback(); } }
到此這篇關于TypeScript如何開啟嚴格空值檢查的文章就介紹到這了,更多相關TypeScript嚴格空值檢查內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
微信小程序實現(xiàn)簡單input正則表達式驗證功能示例
這篇文章主要介紹了微信小程序實現(xiàn)簡單input正則表達式驗證功能,結合實例形式分析了微信小程序input組件事件綁定及正則驗證相關操作技巧,需要的朋友可以參考下2017-11-11JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會跳過稀疏數(shù)組中缺少的元素,它的返回數(shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關知識,需要的朋友參考下2018-02-02