在 TypeScirpt 中， undefined 和 null 两个值是比较特殊和容易出错的地方，如果不处理好这两个值，可能会导致代码出现严重的错误。那么我们应该如何正确处理 undefined 和 null 呢？在本文中，我们将会详细讨论这个问题并提供指导意义和示例代码。
undefined 和 null 的含义
在 JavaScript 中， undefined 表示“未定义”， null 表示“空值”，两者都属于原始数据类型。 undefined 是在声明变量 but 未赋值时的默认值，null 则需要程序员显示地赋值为空值。
在 TypeScript 中同样也是如此，undefined 和 null 两个值都可以作为类型参与变量或函数的定义。
undefined 和 null 的判断
在 JavaScript 中，两个值比较特殊，会自动转换成 boolean 类型的值，通常有三种方法可以判断这两个特殊值：
方法一：typeof 操作符
const foo = undefined; const bar = null; console.log(typeof foo === 'undefined'); // true console.log(typeof bar === 'object'); // true
typeof 操作符可以准确地判断 undefined 值，但是对于 null 值则会返回 'object'，所以不能通过 typeof 判断 null 值。
方法二：三重等号操作符
const foo = undefined; const bar = null; console.log(foo === undefined); // true console.log(bar === null); // true
三元运算符可以判断 undefined 和 null，但是需要注意的是，如果使用两重等号操作符，会发生自动类型转换，导致结果不准确。
方法三：if 判断
-- -------------------- ---- ------- ----- --- - ---------- ----- --- - ----- -- ----- - -- --- - -- ----- - -- --- -
if 语句会将 undefined 和 null 视为 false，所以可以通过 if 判断来判断这两个特殊值。
处理 undefined 和 null
在 TypeScript 中，可以通过类型注解的方式来声明 undefined 和 null 的类型，声明方法如下：
let foo: undefined = undefined;
let bar: null = null;
function test(x: number, y?: number) {
console.log(x + (y || 0));
}在函数参数中使用 ? 可以标记该参数为可选参数，并会自动将其类型转化为联合类型 number|undefined，这样就可以在函数内部处理 undefined 和 null 的情况了。
当然，还有更好的处理方式：
方法一：非空断言操作符
非空断言操作符 ! 可以将一个变量断言为非空值，示例如下：
-- -------------------- ---- ------- --- ---- ------ - ---------- --- ---- ------ - ----- ------------------------- -- ----- ------- ------ -- -------- ----------- ------------------------- -- ----- ------- ------ -- -------- ------ --- - -------- --- - ----- ------------------------- -- - ------------------------- -- ----- ------- ------ -- -------- ------
使用非空断言操作符 ! 可以断言变量不为空，但是需要注意的是，如果变量为空值，会降低程序的健壮性。
方法二：类型保护
在 TypeScript 中，可以使用函数类型保护，将一个变量类型缩小，示例如下：
-- -------------------- ---- ------- -------- --------------- - - --------- - ------ - -- - - ------ - --- --------- -- - --- ----- - --- ---- ------ - ---------- --- ---- ------ - ----- -- ---------------- - ------------------------ - -- ---------------- - ------------------------ -
isDefined 函数返回 true 表示变量不为 undefined 和 null，这样就可以直接使用类型 T 的方法或属性了。
注意事项
无论使用哪种方式处理 undefined 和 null，都需要注意以下几点：
- 在不存在 undefined 和 null 的情况下，不要使用非空断言操作符 !。
- 在变量类型缩小时，需要保证程序的逻辑正确，并避免降低程序的健壮性。
- 在使用三元运算符时，需要注意运算优先级和自动类型转换问题，建议使用严格等号操作符或 if 语句进行判断。
结论
在 TypeScript 中正确处理 undefined 和 null 是非常重要的一步，需要结合具体业务场景和编码习惯进行选择。可以使用非空断言操作符 ! 和类型保护，也可以使用函数参数中的可选参数，甚至可以使用自定义类型保护函数。总之，保证程序的健壮性和可读性是最重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719f17bc30a6eff8b8857b0