TypeScript - null 与 undefined

In TypeScript 中，'undefined' 表示变量已被声明但尚未赋值。另一方面，'null' 指代一个不存在的对象，本质上是“空”或“无”。

你是否遇到过需要声明变量但稍后初始化的场景？这通常发生在处理 API 时，需要在获取 API 响应后初始化变量。在这种情况下，可以使用 null 或 undefined 数据类型来表示值的缺失。

什么是 null？

In TypeScript 中，'null' 是一个原始值，表示变量未被赋值。它被显式赋值给变量，以指示该变量为空或不包含任何值。

让我们通过下面的示例来理解如何在 TypeScript 中使用 'null'。

Example: Basic use of null

在下面的代码中，我们定义了一个 'null' 类型的变量。它表示变量 'a' 包含一个空值。在输出中，你可以看到它打印了 null 值。

// 使用 null 值
let a: null = null;
console.log(a); // null

编译后，将生成以下 JavaScript 代码。

// 使用 null 值
let a = null;
console.log(a); // null

上述代码的输出如下

null

Example: Data type of 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

Example: Reinitializing null variable

在下面的代码中，变量 'a' 的数据类型是 number 或 null。最初，我们为它赋值为 null。然后，我们将 number 值赋给变量 '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 中。由于 greet() 函数不返回任何值，变量的值为 undefined。

// 函数不返回值的场景
function greet(name: string): void {
    console.log(`Hello ${name}`);
}
let a = greet('John');
console.log(a); // undefined

编译时，会生成以下 JavaScript 代码。

// 函数不返回值的场景
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 值。

示例：Object 属性

在下面的代码中，'user' 类型具有 'name'、'age' 和 'email' 属性。如果用户的年龄不可用，'age' 属性可以接受 null 值。'email' 属性是可选的，因此在定义对象时不使用它也是可以的。

'user1' 对象包含 'age' 属性，其值为 null。'user2' 对象不包含 'email' 属性。因此，对于 'user2' 对象，它是 undefined。

type User = {
    name: string;
    age: number | null;
    email?: string;
  };
  
  let user1: User = {
    name: "John Doe",
    age: null, // 明确未提供年龄
    email: "john@example.com"
  };
  
  let user2: User = {
    name: "Jane Doe",
    age: 25
    // email 是可选的，因此可以是 undefined
  };
  
  console.log(user1); // 输出: { name: "John Doe", age: null, email: "john@example.com" }
  console.log(user2); // 输出: { name: "Jane Doe", age: 25 }

编译后，将生成以下 JavaScript 代码。

let user1 = {
    name: "John Doe",
    age: null, // 明确未提供年龄
    email: "john@example.com"
};
let user2 = {
    name: "Jane Doe",
    age: 25
    // email 是可选的，因此可以是 undefined
};
console.log(user1); // 输出: { name: "John Doe", age: null, email: "john@example.com" }
console.log(user2); // 输出: { name: "Jane Doe", age: 25 }

上述代码的输出如下

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

通过这种方式，你可以使用 null 或 undefined 来表示代码中值的缺失。