当前位置: 首页 > news >正文

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

相关文章:

typescript基础之null和undefined

TypeScript是一种基于JavaScript的编程语言,它支持静态类型检查和面向对象的特性。TypeScript中的null和undefined是两种基本类型,它们分别表示空值或未定义的值。在本文中,我将介绍TypeScript中null和undefined的含义、区别、检查方法和使用…...

php_mb_strlen指定扩展

1 中文在utf-字符集下占3个字节,所以计算出来长度为9。 2 可以引入php多字节字符的扩展,默认是没有的,需要自己配置这个函数 3 找到php.ini文件,去掉;extension mbstring的注释,接着重启apache服务 可以看到准确输出的中文的长度…...

利用OpenCV光流算法实现视频特征点跟踪

光流简介 光流(optical flow)是运动物体在观察成像平面上的像素运动的瞬时速度。光流法是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在的对应关系,从而计算出相邻帧之间物体的运动信息的一种方法。…...

探索无限创造力的星辰大道,画出想象的浩瀚宇宙!-turtle

介绍 视频教程地址在此:https://www.bilibili.com/video/BV1Pm4y1H7Tb/ 大家好,欢迎来到本视频!今天,我们将一同探索Python编程世界中的一个有趣而创意的库——Turtle库。无需专业绘画技能,你就可以轻松地用代码绘制…...

企业数字化转型大数据湖一体化平台项目建设方案PPT

导读:原文《企业数字化转型大数据湖一体化平台项目建设方案PPT》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 喜欢文章,您可以点赞评论转发…...

【3Ds Max】车削命令的简单使用(以制作花瓶为例)

简介 在3ds Max中,"车削"(Lathe)是一种建模命令,用于创建围绕轴线旋转的几何形状。通过车削命令,您可以将一个闭合的平面或曲线几何形状旋转,从而生成一个立体对象。这种方法常用于创建圆柱体、…...

Python 3 使用HBase 总结

HBase 简介和安装 请参考文章:HBase 一文读懂 Python3 HBase API HBase 前期准备 1 安装happybase库操作hbase 安装该库 pip install happybase2 确保 Hadoop 和 Zookeeper 可用并开启 确保Hadoop 正常运行 确保Zookeeper 正常运行3 开启HBase thrift服务 使用命…...

Maven方式构建SpringBoot项目

目录 1、创建maven项目 2、添加springboot相关依赖 3、配置启动端口 4、修改APP文件 5、配置controller 6、启动应用 1、创建maven项目 项目如下&#xff1a; 2、添加springboot相关依赖 <parent><groupId>org.springframework.boot</groupId><arti…...

不花一分钱,利用免费电脑软件将视频MV变成歌曲音频MP3

教程 1.点击下载电脑软件下载地址&#xff0c;点击下载&#xff0c;安装。&#xff08;没有利益关系&#xff0c;没有打广告&#xff0c;只是单纯教学&#xff09; 2.安装完成后&#xff0c;点击格式工厂 3.然后如图所示依次&#xff0c;点击【音频】->【-MP3】 3.然后点击…...

运营知识之用户运营(一)触达用户的几种方式

运营知识之用户运营&#xff08;一&#xff09;触达用户的几种方式 APP推送短信&#xff08;DeepLink/Deferred DeepLink&#xff09;&#xff1a;短信拉起app电子邮件 EDM电话/外呼&#xff08;人工、AI&#xff09;电话外呼加短信&#xff08;操作步骤短链&#xff09;微信生…...

cocos creator pageView 循环展示 广告牌功能

在使用 creator pageView 滑动到最大或者最小为止的时候 滑动不了没法流畅的运行到最开始或者最后那个界面 循环展示 1.策划大人有需要就是要循环流畅的展示 解决方案: 做预制件的时候 最第一个界面之前 做一个最后的界面放到最前边去 比如 1,2,3,4,5,6,7,8 修改成 8,1…...

PyTorch Lightning:通过分布式训练扩展深度学习工作流

一、介绍 欢迎来到我们关于 PyTorch Lightning 系列的第二篇文章&#xff01;在上一篇文章中&#xff0c;我们向您介绍了 PyTorch Lightning&#xff0c;并探讨了它在简化深度学习模型开发方面的主要功能和优势。我们了解了 PyTorch Lightning 如何为组织和构建 PyTorch 代码提…...

无涯教程-Perl - splice函数

描述 此函数从LENGTH元素的OFFSET元素中删除ARRAY元素,如果指定,则用LIST替换删除的元素。如果省略LENGTH,则从OFFSET开始删除所有内容。 语法 以下是此函数的简单语法- splice ARRAY, OFFSET, LENGTH, LISTsplice ARRAY, OFFSET, LENGTHsplice ARRAY, OFFSET返回值 该函数…...

归并排序:从二路到多路

前言 我们所熟知的快速排序和归并排序都是非常优秀的排序算法。 但是快速排序和归并排序的一个区别就是&#xff1a;快速排序是一种内部排序&#xff0c;而归并排序是一种外部排序。 简单理解归并排序&#xff1a;递归地拆分&#xff0c;回溯过程中&#xff0c;将排序结果进…...

【Vue】运行项目报错 This dependency was not found

背景 运行Vue 项目报错&#xff0c;提示This dependency was not found&#xff1b;然后我根据提示 执行 npm install --save vue/types/umd ,执行后发现错误&#xff0c;我一开始一直以为是我本地装不上这个依赖。后来找了资料后&#xff0c;看到应该是自己的代码里面随意的i…...

Shell编程之正则表达式

文本处理器&#xff1a;三剑客&#xff1a;grep查找sed awk shell正则表达式由一类特殊字符以及文本字符所编写的一种模式&#xff0c;处理文本当中的内容&#xff0c;其中的一些字符不表示字符的字面含义表示一种控制或者通配的功能 通配符&#xff1a;匹配文件名和目录名&a…...

QGraphicsView 实例3地图浏览器

主要介绍Graphics View框架&#xff0c;实现地图的浏览、放大、缩小&#xff0c;以及显示各个位置的视图、场景和地图坐标 效果图: mapwidget.h #ifndef MAPWIDGET_H #define MAPWIDGET_H #include <QLabel> #include <QMouseEvent> #include <QGraphicsView&…...

Windows基础安全知识

目录 常用DOS命令 ipconfig ping dir cd net user 常用DOS命令 内置账户访问控制 Windows访问控制 安全标识符 访问控制项 用户账户控制 UAC令牌 其他安全配置 本地安全策略 用户密码策略复杂性要求 强制密码历史&#xff1a; 禁止密码重复使用 密码最短使用期限…...

自定义注解和自定义注解处理器来扫描所有带有某个特定注解的Controller层

在Spring Boot中&#xff0c;您可以使用自定义注解和自定义注解处理器来扫描所有带有某个特定注解的Controller层。 以下是一个简单的示例&#xff0c;演示如何实现这个功能&#xff1a; 首先&#xff0c;创建自定义注解 CustomAnnotation &#xff0c;用于标记需要被扫描的C…...

浏览器渲染原理 - 输入url 回车后发生了什么

目录 渲染时间点渲染流水线1&#xff0c;解析&#xff08;parse&#xff09;HTML1.1&#xff0c;DOM树1.2&#xff0c;CSSOM树1.3&#xff0c;解析时遇到 css 是怎么做的1.4&#xff0c;解析时遇到 js 是怎么做的 2&#xff0c;样式计算 Recalculate style3&#xff0c;布局 la…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...