Typescript Null和Undefined的区别

引言

Typescript是一种基于JavaScript的变成语言，支持静态类型检查和面向对象的特性。Typescript中的Null和Undefined分别表示空值和未定义的值。

Null和Undefined之间的主要区别：

Null	Undefined
它是一个对象object	它是一种类型本身
它是一个赋值的值。可以赋给一个变量或者常量，表示该变量没有指向任何对象。	undefined表示变量已经被声明但未被赋值。
执行原始操作时，null会被转换为0	执行原始操作时，undefined会转换为NaN

区别一

• null和undefined在类型上是不同的，null属于object类型，而undefined属于undefined类型。我们可以用typeof运算符来检查它们的类型。

console.log(typeof null); // object
console.log(typeof undefined); // undefined

区别二

• null表示一个空或不存在的对象，它是一个字面量，可以直接赋值给变量或常量。

字面量：字面量可以表示不同类型的值，如数字、字符串、布尔值和特殊值（如null和undefined）。

• undefined表示一个声明了但没有赋值的变量，或者一个不存在的属性或索引。它也是一个字面量，可以直接赋值给变量或常量。例如：

let x: number; // x是一个未定义的变量
console.log(x); // undefined
console.log(y); // error: y is not defined
let arr: number[] = [1, 2, 3];
console.log(arr[3]); // undefined

区别三

• 在JavaScript中，Null是一个表示空值的特殊对象。当我们执行原始操作时，Null会转换为0。这是因为在JavaScript中，Null被视为falsy值之一，而falsy值在进行数学运算时会被转换为0。（TypeScripts有静态类型检查，不允许初始赋值为null）

  var x = null;
  var y = 5;
  var result = x + y;
  console.log(result); // 输出为5，因为Null会被转换为0
  

• 在JavaScript中，undefined是一个表示未定义的特殊值。当我们执行原始操作时，undefined会转换为NaN（Not a Number）。

  var x;
  var y = 5;
  var result = x + y;
  console.log(result); // 输出为NaN，因为undefined会被转换为NaN
  

正确使用

• 如果我们想要让某个类型可以接受null或undefined赋值，我们可以使用联合类型（Union Type），即用|符号连接多个类型。例如：

let s: string | null | undefined = 'hello';
s = null; // ok
s = undefined; // ok

• 我们可以使用==运算符来同时检查null和undefined，因为它们在这种情况下会被视为相等。例如：

let x: number | null | undefined;
let x： 数字 |空 |定义;
if (x == null) {
    console.log('x is null or undefined');
}

• 我们也可以使用===运算符来分别检查null和undefined，因为它们在这种情况下会被视为不等。例如：

let x: number | null | undefined;
if (!x) {
    console.log('x is falsy');
}

• 我们还可以使用??运算符来提供一个默认值，当左侧的表达式为null或undefined时，返回右侧的表达式。这个运算符叫做Nullish Coalescing Operator（空值合并运算符）。例如：

let x: number | null | undefined;
let y = x ?? 0; // y is 0 if x is null or undefined, otherwise y is x

• 我们还可以使用?.运算符来访问一个可能为null或undefined的对象的属性或方法。这个运算符叫做Optional Chaining Operator（可选链运算符）。如果对象为null或undefined，则返回undefined，否则返回正常的结果。例如：

interface Person {
    name: string;
    age?: number;
}
 
let p: Person | null = null;
console.log(p?.name); // undefined
console.log(p?.age); // undefined
p = { name: 'Alice', age: 20 };
console.log(p?.name); // Alice
console.log(p?.age); // 20

Null和Undefined的使用注意事项

• 我们应该尽量避免使用null，因为它会增加代码的复杂度和出错的可能性。我们可以使用undefined来表示一个缺失或未知的值，或者使用其他更具体的值，如空字符串、空数组、空对象等。
• 我们应该尽量使用===运算符来比较null和undefined，因为它会保持它们的类型和值不变，避免一些隐式的类型转换和意外的结果。
• 我们应该尽量使用??运算符来提供一个默认值，因为它只会在null或undefined时生效，而不会影响其他falsy值，如0、false等。
• 我们应该尽量使用?.运算符来访问一个可能为null或undefined的对象的属性或方法，因为它会避免抛出TypeError异常，而是返回undefined，这样我们可以更容易地处理错误情况。