深入理解TypeScript中的null和undefined

在JavaScript的世界中，null和undefined是两个非常特殊的值，它们分别表示“没有值”和“值未定义”。而在TypeScript中，这两个值不仅作为值存在，还与类型系统紧密相关。本文将通过实例深入探讨null和undefined在TypeScript中的使用和它们对类型系统的影响。

基础概念回顾

在TypeScript中，null和undefined是两种特殊的类型，它们可以作为联合类型的一部分，也可以用于非常简单的类型保护。以下是一个简单的函数示例，展示了如何在TypeScript中处理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

简化类型声明

在某些情况下，我们可以简化类型声明。例如，使用number | null可以自动接受undefined值，因为undefined是null的子类型：

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

严格空值检查

如果不使用--strictNullChecks标志，number类型的参数可以接受null和undefined值。但是，如果我们启用了--strictNullChecks，编译器会阻止将null赋值给number类型的变量：

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); // 编译错误：Argument of type 'null' is not assignable to parameter of type 'number'.

可选链操作符？

使用?操作符可以简化代码，除非我们使用--strictNullChecks标志。在没有--strictNullChecks的情况下，x?: number与x: number | 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); // 输出：value not set
show(z); // 输出：value is null

但是，如果启用了--strictNullChecks，编译器会阻止将null传递给期望number | undefined类型的参数：

// 编译错误：Argument of type 'null' is not assignable to parameter of type 'number | undefined'.
show(z);

总结

总的来说，T | null | undefined、T | null或仅T在没有使用--strictNullChecks标志的情况下是相同的。但是，使用--strictNullChecks标志会阻止在目标联合类型没有null类型声明时传递或赋值null（例如T | undefined或仅T）。同时，使用T | undefined或仅T总是相同的。

示例项目

以下是本博客中使用的示例项目的依赖和技术：

• TypeScript 3.1.3

通过本文的深入分析和实例，希望读者能够更好地理解TypeScript中null和undefined的使用，以及它们如何影响类型系统。