TypeScript - null 與 undefined

---

---

在 TypeScript 中，'undefined' 表示變數已宣告但未賦值。另一方面，'null' 指的是一個不存在的物件，基本上是“空”或“無”。

您是否遇到過需要宣告變數但稍後需要初始化它的場景？這通常發生在處理需要在獲取 API 響應後初始化變數的 API 時。在這種情況下，可以使用 null 或 undefined 資料型別來表示值的缺失。

什麼是 null？

在 TypeScript 中，'null' 是一個原始值，表示未為變數賦值。它被顯式地賦值給變數以指示變數為空或不包含任何值。

讓我們透過下面的示例瞭解如何在 TypeScript 中使用 'null'。

示例：null 的基本用法

在下面的程式碼中，我們定義了一個 'null' 型別變數。它表示變數 'a' 包含空值。在輸出中，您可以看到它列印了一個 null 值。

// Using null value
let a: null = null;
console.log(a); // null

編譯後，它將生成以下 JavaScript 程式碼。

// Using null value
let a = null;
console.log(a); // null

上述程式碼的輸出如下：

null

示例：null 的資料型別

'null' 型別變數的資料型別是 object。

在這裡，我們使用了 'typeof' 運算子來檢查包含 null 值的變數的資料型別。它返回 object，您可以在輸出中看到。

let a: null = null;
console.log(typeof a); // Object

編譯後，它將生成以下 JavaScript 程式碼。

let a = null;
console.log(typeof a); // Object

上述程式碼的輸出如下：

object

示例：重新初始化 null 變數

在下面的程式碼中，變數 'a' 的資料型別是數字或 null。最初，我們為它賦值了 null 值。之後，我們為變數 'a' 賦值了數值。

let a: number | null = null;
console.log("The initial value of the variable a is: " + a); // null
a = 10;
console.log("The value of the variable a is: " + a); // 10

編譯後，它將生成以下 JavaScript 程式碼。

let a = null;
console.log("The initial value of the variable a is: " + a); // null
a = 10;
console.log("The value of the variable a is: " + a); // 10

其輸出如下：

The initial value of the variable a is: null
The value of the variable a is: 10

什麼是 undefined？

當您宣告變數但不賦值時，TypeScript 會自動為變數賦值 'undefined'。當您沒有從函式中返回任何值時，它將返回 undefined 值。但是，您也可以顯式地為 'undefined' 型別的變數賦值 undefined 值。

讓我們透過下面的示例瞭解 undefined。

示例：Undefined 值

在下面的程式碼中，我們定義了變數 'a' 但沒有用值初始化它。因此，它的值為 undefined，您可以在輸出中看到。

let a: number;
console.log("The value of a is " + a);

編譯後，它將顯示以下錯誤：

Variable 'a' is used before being assigned.

並且它還會生成以下 JavaScript 程式碼。

let a;
console.log("The value of a is " + a);

上述 JavaScript 程式碼的輸出如下：

The value of a is undefined

示例：不從函式返回值

在下面的程式碼中，我們定義了 greet() 函式，該函式不返回任何值。

之後，我們呼叫了 greet() 函式並將它的結果儲存在變數 'a' 中。變數的值是 undefined，因為 greet() 函式沒有返回值。

// Not returning a value from the function
function greet(name: string): void {
    console.log(`Hello ${name}`);
}
let a = greet('John');
console.log(a); // undefined

編譯後，它將生成以下 JavaScript 程式碼。

// Not returning a value from the function
function greet(name) {
    console.log(`Hello ${name}`);
}
let a = greet('John');
console.log(a); // undefined

上述程式碼的輸出如下：

Hello John
Undefined

示例：使用 undefined 型別

在這裡，我們使用了 'undefined' 資料型別和變數 'a'，併為其賦值了 undefined 值。

變數 'a' 的型別是 undefined，而不是像 'null' 型別變數那樣的 object。

let a: undefined = undefined;
console.log(a); // undefined
console.log(typeof a); // undefined

編譯後，它將生成以下 JavaScript 程式碼。

let a = undefined;
console.log(a); // undefined
console.log(typeof a); // undefined

輸出如下：

undefined
undefined

Null 與 Undefined：主要區別

您已經瞭解了 Null 和 Undefined。現在，讓我們看看它們之間的主要區別。

讓我們看看下面的示例，這些示例顯示了在哪裡使用 null 和 undefined 值。

示例：物件屬性

在下面的程式碼中，'user' 型別具有 'name'、'age' 和 'email' 屬性。如果使用者的年齡不可用，則 'age' 屬性可以接受 null 值。'email' 屬性是可選的，因此我們在定義物件時不使用它也沒關係。

'user1' 物件包含具有 null 值的 'age' 屬性。'user2' 值不包含 'email' 屬性。因此，對於 'user2' 物件，它是 undefined。

type User = {
    name: string;
    age: number | null;
    email?: string;
  };
  
  let user1: User = {
    name: "John Doe",
    age: null, // Explicitly no age provided
    email: "john@example.com"
  };
  
  let user2: User = {
    name: "Jane Doe",
    age: 25
    // email is optional and thus can be undefined
  };
  
  console.log(user1); // Output: { name: "John Doe", age: null, email: "john@example.com" }
  console.log(user2); // Output: { name: "Jane Doe", age: 25 }

編譯後，它將生成以下 JavaScript 程式碼。

let user1 = {
    name: "John Doe",
    age: null, // Explicitly no age provided
    email: "john@example.com"
};
let user2 = {
    name: "Jane Doe",
    age: 25
    // email is optional and thus can be undefined
};
console.log(user1); // Output: { name: "John Doe", age: null, email: "john@example.com" }
console.log(user2); // Output: { name: "Jane Doe", age: 25 }

上述程式碼的輸出如下：

{ name: 'John Doe', age: null, email: 'john@example.com' }
{ name: 'Jane Doe', age: 25 }

這樣，您可以使用 null 或 undefined 來表示程式碼中值的缺失。