在 TypeScript 中检查 Null 和 Undefined

Migel Hewage Nimesha 2023年1月30日 2022年5月18日
  1. 使用可选链检查 TypeScript 中的 nullundefined
  2. 在 TypeScript 中使用 Nullish Coalescing 检查 nullundefined
  3. 在 TypeScript 中使用 ===== 运算符检查 nullundefined
在 TypeScript 中检查 Null 和 Undefined

TypeScript 对 nullundefined 进行了类似的定义。在编程中,null 是指某个为空或不存在的对象,undefined 是指声明为没有赋值的变量。

我们可以使用几种不同的方法来识别 nullundefined,但它们都不包含直接指定 nullundefined 值的直接函数或语法。

从 TypeScript 3.7 开始,有一种方法可以使用 Nullish Coalescing、可选链以及 ===== 运算符来识别 nullundefined 值。

本文将讨论在 TypeScript 中检查 nullundefined 的方法。

使用可选链检查 TypeScript 中的 nullundefined

可选链接 (?.) 是一个运算符,如果遇到 nullundefined,我们可以使用它来终止代码运行。因此,当它识别出 nullundefined 时,它将简单地返回 undefined 作为输出。

参考下面的例子。

const obj =
{
    branch1: {
        emp1: {
            name : "Rory",
            age : 25
        }
    }
}

console.log(obj.branch1.emp1.name)

输出:

Rory

obj 下没有提及 emp1 时,将返回错误消息。但是,如果我们使用可选链接 (?.),它将返回 undefined 作为输出。

const obj =
{
    branch1: {
    }
}

console.log(obj.branch1?.emp1?.name)

输出:

Undefined

如果 obj.branch.emp1 不存在,运算符告诉不执行任何操作,而是返回 undefined

在这样的情况下,

console.log(obj.branch1?.emp1.name)

它说当 emp1 元素不存在时访问 name 元素;它将返回错误消息而不是 undefined。因此,我们应该手动将 (?.) 运算符添加到元素中;否则,将返回错误。

因此,可以在此方法中检查 undefined

此外,可选链接减少了代码并使访问元素而不是使用&&更有效。它以更少的代码返回元素(如果存在)。

在 TypeScript 中使用 Nullish Coalescing 检查 nullundefined

Nullish Coalescing (??) 是另一种识别 nullundefined 值的方法。当与 nullundefined 相对时,它将返回默认值。

在某些情况下,零或空字符串是应该使用的实际值,但是当||被使用,它不会返回那些值。因此,使用 Nullish Coalescing (??) 运算符,可以返回这些值。

因此||可以换成 ?? 当使用默认值时。

下面是一些带有 (??) 的 Nullish Coalescing 应用程序。

null ?? "Value";
// "Value"

undefined ?? "Value";
// "Value"

false ?? true;
// false

0 ?? 100;
// 0

"" ?? "n/a";
// ""

NaN ?? 0;
// NaN

在 TypeScript 中使用 ===== 运算符检查 nullundefined

在 TypeScript 中可以同时使用 ===== 来执行 nullundefined 检查。

=== 运算符用于通过严格检查方法验证变量时,它将检查变量的类型和变量值的类型,并执行严格的 undefined 检查。

此外,我们可以使用 == 在 TypeScript 中执行 undefined 检查。在严格检查方法中使用 == 时,它只会检查值的类型,这与 === 运算符不同。

== 运算符可以使用严格检查方法进行 null 检查。如果变量为 null 或什至是 undefined,它将返回 true

只能使用 == 运算符对 null 执行严格检查。在 TypeScript 中,我们可以按照 juggling-check 方法同时检查 nullundefined

例子:

var var1: number;
var var2: number = null;

function typecheck(x, name) {
    if (x == null) {
        console.log(name + ' == null');
    }

    if (x === null) {
        console.log(name + ' === null');
    }

    if (typeof x === 'undefined') {
        console.log(name + ' is undefined');
    }
}

typecheck(var1, 'var1');
typecheck(var2, 'var2');

输出:

"var1 == null"

"var1 is undefined"

"var2 == null"

"var2 === null"
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

相关文章 - TypeScript Undefined