typescript基础之null和undefined

TypeScript是一种基于JavaScript的编程语言,它支持静态类型检查和面向对象的特性。TypeScript中的null和undefined是两种基本类型,它们分别表示空值或未定义的值。在本文中,我将介绍TypeScript中null和undefined的含义、区别、检查方法和使用注意事项。

null和undefined的含义
•  null表示一个空或不存在的对象,它是一个字面量,可以直接赋值给变量或常量。例如:

let obj: object = null; // obj是一个空对象

•  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

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

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

•  null和undefined在值上也是不同的,null表示一个空值,而undefined表示一个未知的值。我们可以用===运算符来比较它们是否相等。例如:

console.log(null === undefined); // false

•  null和undefined在默认情况下都是所有类型的子类型,即它们可以赋值给任何类型。但是如果我们开启了strictNullChecks选项,那么只有any、void、null和undefined类型可以接受null或undefined赋值,其他类型则会报错。例如:

let s: string = 'hello';
s = null; // error: Type 'null' is not assignable to type 'string'.
s = undefined; // error: Type 'undefined' is not assignable to type 'string'. 

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

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

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

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

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

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

•  我们还可以使用!运算符来否定null或undefined,因为它们都是falsy值,即在布尔上下文中会被转换为false。例如:

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,这样我们可以更容易地处理错误情况。

你可能感兴趣的:(typescript,javascript,前端)