TypeScript中null和undefined的深入解析
在TypeScript中,null
和undefined
是两种特殊的类型,它们分别可以取null
和undefined
值。这两种类型不仅可以单独使用,还可以与其他类型组合成联合类型(Union Type),并且在类型守卫(Type Guards)中也有广泛应用。本文将通过实例深入探讨null
和undefined
在TypeScript中的使用方式及其在严格空值检查(--strictNullChecks
)下的行为。
1. 基本用法
null
和undefined
可以作为联合类型的一部分,允许函数参数接受多种类型的值。例如:
function show(x: number | null | undefined) {
if (x === undefined) {
console.log("value not set");
} else if (x === null) {
console.log("value is null");
} else {
console.log(x);
}
}
let x = 10;
let y;
let z = null;
show(x); // 输出: 10
show(y); // 输出: value not set
show(z); // 输出: value is null
在这个例子中,show
函数的参数x
可以接受number
、null
或undefined
。通过简单的类型检查,我们可以区分输入值的类型并输出相应的结果。
2. 简化联合类型
在某些情况下,我们可以简化联合类型。例如,number | null
也可以接受undefined
值,因为TypeScript会自动将undefined
视为可选值:
function show(x: number | null) {
if (x === undefined) {
console.log("value not set");
} else if (x === null) {
console.log("value is null");
} else {
console.log(x);
}
}
let x = 10;
let y;
let z = null;
show(x); // 输出: 10
show(y); // 输出: value not set
show(z); // 输出: value is null
然而,如果仅使用number
类型,TypeScript会阻止将null
或undefined
传递给函数:
function show(x: number) {
if (x === undefined) {
console.log("value not set");
} else if (x === null) {
console.log("value is null");
} else {
console.log(x);
}
}
let x = 10;
let y;
let z = null;
show(x); // 输出: 10
show(y); // 报错:TS2345: Argument of type 'undefined' is not assignable to parameter of type 'number'.
show(z); // 报错:TS2345: Argument of type 'null' is not assignable to parameter of type 'number'.
3. 严格空值检查(--strictNullChecks
)
当启用--strictNullChecks
标志时,TypeScript会对null
和undefined
的使用进行更严格的检查。例如:
function show(x: number) {
if (x === undefined) {
console.log("value not set");
} else if (x === null) {
console.log("value is null");
} else {
console.log(x);
}
}
let x = 10;
let y;
let z = null;
show(x); // 输出: 10
show(y); // 报错:TS2345: Argument of type 'undefined' is not assignable to parameter of type 'number'.
show(z); // 报错:TS2345: Argument of type 'null' is not assignable to parameter of type 'number'.
在这种情况下,null
和undefined
不能被传递给number
类型的参数,除非明确声明联合类型。
4. 可选参数与--strictNullChecks
可选参数(?
)在默认情况下允许undefined
值,但在启用--strictNullChecks
时,行为会有所不同:
function show(x?: number) {
if (x === undefined) {
console.log("value not set");
} else if (x === null) {
console.log("value is null");
} else {
console.log(x);
}
}
let x = 10;
let y;
let z = null;
show(x); // 输出: 10
show(y); // 输出: value not set
show(z); // 输出: value is null
启用--strictNullChecks
后:
function show(x?: number) {
if (x === undefined) {
console.log("value not set");
} else if (x === null) {
console.log("value is null");
} else {
console.log(x);
}
}
let x = 10;
let y;
let z = null;
show(x); // 输出: 10
show(y); // 输出: value not set
show(z); // 报错:TS2345: Argument of type 'null' is not assignable to parameter of type 'number | undefined'.
5. 总结
在TypeScript中,T | null | undefined
、T | null
和T
在默认情况下是等价的,但启用--strictNullChecks
后,null
和undefined
的使用会受到更严格的限制。具体来说:
-
T | null | undefined
和T | null
在默认情况下可以接受undefined
值。 -
T
类型不能接受null
或undefined
,除非明确声明联合类型。 - 可选参数(
?
)在默认情况下允许undefined
值,但在--strictNullChecks
下,null
值需要明确声明。
通过合理使用null
和undefined
,并结合--strictNullChecks
标志,可以有效提升代码的安全性和可维护性。
示例项目
-
依赖与技术:
- TypeScript 3.1.3