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

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

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

了解 null 和 undefined

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

null：表示一個被賦值為空或不存在的對象引用。
undefined：表示一個變量被聲明但沒有被賦值，或一個對象屬性不存在。

簡單來說，當我們想要表示一個值為空或不存在時，可以使用 null 或 undefined。

null 和 undefined 的區(qū)別

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

null

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

例如，我們有一個變量 name，我們可以將其賦值為 null 來表示這個變量的值為空：

let name: string | null = null;

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

undefined

undefined 同樣也是一個 JavaScript 原始值，表示一個變量被聲明但沒有被賦值，或一個對象屬性不存在。當你訪問一個未賦值的變量或不存在的對象屬性時，該值就會被返回。

例如，我們聲明一個變量 age，但沒有為其賦值：

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

在這個例子中，age 被聲明了但沒有賦值，因此它的值是 undefined。

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

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

null 是一個被賦值為空的對象引用，表示空或不存在的值。
undefined 表示一個變量被聲明但沒有被賦值，或一個對象屬性不存在。

如何處理

null 和 undefined

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

避免隱式轉(zhuǎn)換

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

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

使用條件語句

當我們需要處理可能為 null 或 undefined 的值時，可以使用條件語句來進行判斷和處理。

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

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

使用默認值

為了確保變量不為 null 或 undefined，我們可以使用默認值來處理這種情況。

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

在這個例子中，如果 name 為 null 或 undefined，則使用默認值 "Unknown"。

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

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

類型斷言

類型斷言是一種方式，可以手動指定變量的類型。我們可以使用類型斷言來告訴編譯器，我們確定一個變量不會為 null 或 undefined。

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

在這個例子中，我們使用了非空斷言 ! 來告訴編譯器 name 不會為 null 或 undefined。這樣我們就可以安全地使用 name 變量，而無需進行額外的判斷。

非空斷言

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

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

在這個例子中，我們使用了非空斷言 ! 來告訴編譯器 name 不會為 null 或 undefined。這樣我們就可以安全地使用 name 變量，而無需進行額外的判斷。

實際應用案例

讓我們看幾個實際的應用案例，來更好地理解在 TypeScript 中如何處理 null 和 undefined。

例子一：安全訪問對象屬性

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

在這個例子中，我們定義了一個 Person 接口，它有兩個可選的屬性 name 和 age。在 printPersonName 函數(shù)中，我們安全地訪問了 person 對象的 name 屬性，并使用默認值 "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!");
}

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