欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript如何開啟嚴(yán)格空值檢查

 更新時(shí)間:2022年03月30日 16:06:56   作者:?搞前端的半夏?  
這篇文章主要介紹了TypeScript如何開啟嚴(yán)格空值檢查,文章圍繞TypeScript的相關(guān)資料展開詳情內(nèi)容,需要的小伙伴可以參考一下

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)情況下nullundefined是所有類型的子類型。 就是說你可以把nullundefined賦值給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)格空值檢查!

image-20220306223611971

注意點(diǎn)1

在嚴(yán)格空值檢查模式下,null和undefined無法賦值給其他類型的變量。

例如下面的代碼在*strictNullChecks=true下,是無法編譯通過的。

let userName: string;
userName = "搞前端的半夏";  // OK
userName = null;      // OK
userName = undefined; // OK

image-20220306223913935

注意點(diǎn)2

嚴(yán)格空值檢查并不意味著變量的類型無法設(shè)置為null和undefined

例如下面的代碼在*strictNullChecks=true下,正常編譯通過的。

let userName: null;
userName = null;  

let age: undefined;
age = undefined;  

image-20220306224456016

二、變量如何可以為空

在正常的編程中,我們并不會(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

image-20220306225028895

2. a? 默認(rèn)undefined

聯(lián)合類型可以在Object中使用

type User = {
  name: string ;
  age:number | undefined
};

這里我們?cè)O(shè)置age的類型為numberundefined。

下面的兩種用法都是正確的。

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. 變量可空的安全檢查

如果變量的類型包含nullor undefined,則訪問任何屬性都會(huì)產(chǎn)生編譯時(shí)錯(cuò)誤:

function UserNameLength(userName: string | null) {
  return userName.length;
}

image-20220306232041298

所以在訪問屬性之前,必須要先判斷變量的值是否為空!

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類型。

image-20220306232605352

那么這個(gè)函數(shù)的我們?cè)谡{(diào)用函數(shù)的時(shí)候會(huì)報(bào)錯(cuò)!

image-20220306232526506

類似于在訪問屬性之前檢查對(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)文章

最新評(píng)論