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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
TypeScript中,strictNullChecks是一个编译选项,用于强制检查nullundefined的类型。当strictNullChecks设置为true时,变量的类型不能为nullundefined,除非明确地将其包含在允许这些类型的联合类型中。引用\[1\]中的代码示例展示了在strictNullChecks为true时,如何声明变量为nullundefined,并且编译通过。例如,可以使用let userName: null; userName = null;来声明一个变量为null。同样,可以使用let age: undefined; age = undefined;来声明一个变量为undefined。这些代码在strictNullChecks为true时是合法的。 要在TypeScript中启用strictNullChecks,可以通过两种方式进行设置。一种方式是通过VS Code的设置界面进行设置,具体步骤是:打开文件->首选项->设置,然后搜索strict Null Checks,找到对应的选项进行勾选即可。另一种方式是通过编辑settings.json文件进行设置,具体步骤是:在settings.json文件中添加"js/ts.implicitProjectConfig.strictNullChecks": true。引用\[2\]提供了这种设置的示例。 然而,引用\[3\]中的代码示例展示了在strictNullChecks为true时,无法编译通过的情况。例如,let userName: string; userName = "搞前端的半夏";是合法的,因为字符串类型可以赋值给userName变量。但是,userName = null;和userName = undefined;是不合法的,因为在strictNullChecks为true时,变量的类型不能为nullundefined。 综上所述,strictNullChecks是TypeScript中的一个编译选项,用于强制检查nullundefined的类型。当strictNullChecks为true时,变量的类型不能为nullundefined,除非明确地将其包含在允许这些类型的联合类型中。 #### 引用[.reference_title] - *1* *3* [TypeScript 2.0开启空值的严格检查](https://blog.csdn.net/devcloud/article/details/123503845)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vscode 编辑器的 TypeScript 检查如何全局打开 strictNullChecks](https://blog.csdn.net/weixin_44067191/article/details/119923325)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

韩小浪~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值