腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

TypeScript中的類型斷言和非空斷言的使用方法

更新時(shí)間：2023年07月04日 11:32:00 作者：ShihHsing

類型斷言是一種方式，可以手動(dòng)指定變量的類型，非空斷言是一種類型斷言的特殊形式，這篇文章主要給大家介紹TypeScript 中的類型斷言和非空斷言的使用方法,需要的朋友可以參考下

了解 null 和 undefined

在 TypeScript 和 JavaScript 中，null 和 undefined 都表示某個(gè)變量或?qū)傩缘娜笔Щ虿淮嬖?。讓我們先?lái)看一下它們的定義：

null：表示一個(gè)被賦值為空或不存在的對(duì)象引用。
undefined：表示一個(gè)變量被聲明但沒(méi)有被賦值，或一個(gè)對(duì)象屬性不存在。

簡(jiǎn)單來(lái)說(shuō)，當(dāng)我們想要表示一個(gè)值為空或不存在時(shí)，可以使用 null 或 undefined。

null 和 undefined 的區(qū)別

雖然 null 和 undefined 都用于表示缺失或不存在的值，但它們之間還是有一些細(xì)微的區(qū)別。讓我們?cè)敿?xì)了解一下：

null

null 是一個(gè) JavaScript 原始值，表示一個(gè)被賦值為空或不存在的對(duì)象引用。它是一個(gè)空對(duì)象指針，用于顯式地表示變量或?qū)傩缘闹禐榭铡?/p>

例如，我們有一個(gè)變量 name，我們可以將其賦值為 null 來(lái)表示這個(gè)變量的值為空：

let name: string | null = null;

在這個(gè)例子中，我們明確地告訴編譯器，name 的值是空的，它不指向任何有效的對(duì)象。

undefined

undefined 同樣也是一個(gè) JavaScript 原始值，表示一個(gè)變量被聲明但沒(méi)有被賦值，或一個(gè)對(duì)象屬性不存在。當(dāng)你訪問(wèn)一個(gè)未賦值的變量或不存在的對(duì)象屬性時(shí)，該值就會(huì)被返回。

例如，我們聲明一個(gè)變量 age，但沒(méi)有為其賦值：

let age: number | undefined;
console.log(age); // 輸出 undefined

在這個(gè)例子中，age 被聲明了但沒(méi)有賦值，因此它的值是 undefined。

區(qū)別總結(jié)

可以簡(jiǎn)單總結(jié)一下 null 和 undefined 的區(qū)別：

null 是一個(gè)被賦值為空的對(duì)象引用，表示空或不存在的值。
undefined 表示一個(gè)變量被聲明但沒(méi)有被賦值，或一個(gè)對(duì)象屬性不存在。

如何處理

null 和 undefined

在編寫代碼時(shí)，我們經(jīng)常會(huì)遇到處理 null 和 undefined 的情況。為了避免出現(xiàn)意外的錯(cuò)誤或異常，我們應(yīng)該注意如何正確地處理這兩個(gè)值。

避免隱式轉(zhuǎn)換

在 JavaScript 中，null 和 undefined 可以進(jìn)行隱式轉(zhuǎn)換，這會(huì)導(dǎo)致一些不可預(yù)料的結(jié)果。為了避免這種情況，我們可以使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行比較，同時(shí)要注意變量的類型。

let name: string | null = null;
if (name === null) {
  // 處理變量值為 null 的情況
}

使用條件語(yǔ)句

當(dāng)我們需要處理可能為 null 或 undefined 的值時(shí)，可以使用條件語(yǔ)句來(lái)進(jìn)行判斷和處理。

function printMessage(message?: string) {
  if (message) {
    console.log(message);
  } else {
    console.log("消息為空或不存在");
  }
}
printMessage("Hello, TypeScript!"); // 輸出：Hello, TypeScript!
printMessage(); // 輸出：消息為空或不存在

在這個(gè)例子中，我們定義了一個(gè)函數(shù) printMessage，它接受一個(gè)可選的字符串參數(shù) message。如果 message 有值，則打印該消息，否則打印一條默認(rèn)消息。

使用默認(rèn)值

為了確保變量不為 null 或 undefined，我們可以使用默認(rèn)值來(lái)處理這種情況。

let name: string | null = null;
let displayName = name || "Unknown";
console.log(displayName); // 輸出：Unknown

在這個(gè)例子中，如果 name 為 null 或 undefined，則使用默認(rèn)值 "Unknown"。

TypeScript 中的類型斷言和非空斷言

在 TypeScript 中，我們可以使用類型斷言和非空斷言來(lái)告訴編譯器我們對(duì)變量的類型或值的確定性。

類型斷言

類型斷言是一種方式，可以手動(dòng)指定變量的類型。我們可以使用類型斷言來(lái)告訴編譯器，我們確定一個(gè)變量不會(huì)為 null 或 undefined。

let name: string | null = getName();
let message = "Hello, " + name!; // 使用非空斷言告訴編譯器 name 不為空
function getName(): string | null {
  // 返回一個(gè)字符串或 null
}

在這個(gè)例子中，我們使用了非空斷言 ! 來(lái)告訴編譯器 name 不會(huì)為 null 或 undefined。這樣我們就可以安全地使用 name 變量，而無(wú)需進(jìn)行額外的判斷。

非空斷言

非空斷言是一種類型斷言的特殊形式，用于告訴編譯器一個(gè)變量不為 null 或 undefined。非空斷言的語(yǔ)法是在變量名后面添加一個(gè)感嘆號(hào) !。

let name: string | null = getName();
let message = "Hello, " + name!; // 使用非空斷言告訴編譯器 name 不為空
function getName(): string | null {
  // 返回一個(gè)字符串或 null
}

在這個(gè)例子中，我們使用了非空斷言 ! 來(lái)告訴編譯器 name 不會(huì)為 null 或 undefined。這樣我們就可以安全地使用 name 變量，而無(wú)需進(jìn)行額外的判斷。

實(shí)際應(yīng)用案例

讓我們看幾個(gè)實(shí)際的應(yīng)用案例，來(lái)更好地理解在 TypeScript 中如何處理 null 和 undefined。

例子一：安全訪問(wèn)對(duì)象屬性

interface Person {
  name?: string;
  age?: number;
}
function printPersonName(person: Person) {
  const name = person.name || "Unknown";
  console.log(name);
}
const person1: Person = {
  name: "Alice",
};
const person2: Person = {};
printPersonName(person1); // 輸出：Alice
printPersonName(person2); // 輸出：Unknown

在這個(gè)例子中，我們定義了一個(gè) Person 接口，它有兩個(gè)可選的屬性 name 和 age。在 printPersonName 函數(shù)中，我們安全地訪問(wèn)了 person 對(duì)象的 name 屬性，并使用默認(rèn)值 "Unknown" 處理了屬性不存在的情況。

例子二：處理函數(shù)返回值為 null 或 undefined

function divide(a: number, b: number): number | null {
  if (b === 0) {
    return null;
  }
  return a / b;
}
const result1 = divide(10, 2);
const result2 = divide(10, 0);
if (result1 !== null) {
  console.log("Result:", result1);
} else {
  console.log("Cannot divide by zero!");
}
if (result2 !== null) {
  console.log("Result:", result2);
} else {
  console.log("Cannot divide by zero!");
}

在這個(gè)例子中，我們定義了一個(gè) divide 函數(shù)，用于計(jì)算兩個(gè)數(shù)的商。如果除數(shù)為 0，函數(shù)會(huì)返回 null，否則返回計(jì)算結(jié)果。在使用函數(shù)返回值之前，我們使用條件語(yǔ)句進(jìn)行了判斷，并處理了返回值為 null 的情況。

總結(jié)

在 TypeScript 中，null 和 undefined 都表示某個(gè)變量或?qū)傩缘娜笔Щ虿淮嬖?。它們雖然有些相似，但在細(xì)節(jié)上還是有一些區(qū)別。

null 表示一個(gè)被賦值為空的對(duì)象引用，用于顯式地表示變量或?qū)傩缘闹禐榭铡?/li>
undefined 表示一個(gè)變量被聲明但沒(méi)有被賦值，或一個(gè)對(duì)象屬性不存在。

為了正確地處理 null 和 undefined，我們可以避免隱式轉(zhuǎn)換、使用條件語(yǔ)句、使用默認(rèn)值、使用類型斷言和非空斷言等方法。在實(shí)際的開(kāi)發(fā)中，根據(jù)具體的場(chǎng)景和需求，選擇合適的方式來(lái)處理這兩個(gè)值。