TS中null和undefined特殊性

NUll&undefined

null 与 undefined 也是变量类型,用于定义值为 null 或 undefined

  • undefined 类型只包含一个值undefined,表示未定义(即还未给出定义,以后可能会有定义)。
    // undefined
    let Sakun09: undefined = undefined;
    
  • null 类型也只包含一个值null,表示为空(即此处没有值)。
    // null
    let Sakun10: null = null;

注意,如果没有声明类型的变量,被赋值为undefinednull,在关闭编译设置noImplicitAnystrictNullChecks时,它们的类型会被推断为any。也可以赋值给任何类型。

// 关闭 noImplicitAny 和 strictNullCheckslet a = undefined;   // any
const b = undefined; // anylet c = null;        // any
const d = null;      // anylet a: string = "hello";
a = null; // 合法
a = undefined; // 合法

如果希望避免这种情况,则需要打开编译选项strictNullChecks

// strictNullChecks 启用时
let a: string = "hello";
a = null; // 错误: 不能将类型“null”分配给类型“string”
a = undefined; // 错误: 不能将类型“undefined”分配给类型“string”let b: string | null = "hello";
b = null; // 合法
b = undefined; // 错误: 不能将类型“undefined”分配给类型“string | null”let c: string | undefined = "hello";
c = null; // 错误: 不能将类型“null”分配给类型“string | undefined”
c = undefined; // 合法let d: string | null | undefined = "hello";
d = null; // 合法
d = undefined; // 合法let e: void = undefined; // 合法
e = null; // 错误: 不能将类型“null”分配给类型“void”let f: undefined = undefined; // 合法
f = null; // 错误: 不能将类型“null”分配给类型“undefined”let g: null = null; // 合法
g = undefined; // 错误: 不能将类型“undefined”分配给类型“null”let a: any = null; // 合法
let b: any = undefined; // 合法let c: unknown = null; // 合法
let d: unknown = undefined; // 合法

上面示例中,打开编译设置strictNullChecks以后,赋值为undefined的变量会被推断为undefined类型,赋值为null的变量会被推断为null类型。只要打开这个选项,undefinednull就不能赋值给其他类型的变量(除了any类型和unknown类型)

  • undefined** 只能赋值给 undefined 和 ****void****类型 **。
  • null** 只能赋值给 ****null****类型 **。
  • any** 和 unknown 类型**可以接受 undefinednull

下面是函数返回值的使用

function getName():string |null{return null
}
console.log(getName());

他俩的特殊性

undefinednull既是值,又是类型。

作为值,它们有一个特殊的地方:任何其他类型的变量都可以赋值为undefinednull

let age:number = 24;age = null;      // 正确
age = undefined; // 正确

上面代码中,变量age的类型是number,但是赋值为nullundefined并不报错。

这并不是因为undefinednull包含在number类型里面,而是故意这样设计,任何类型的变量都可以赋值为undefinednull,以便跟 JavaScript 的行为保持一致。

JavaScript 的行为是,变量如果等于undefined就表示还没有赋值,如果等于null就表示值为空。所以,TypeScript 就允许了任何类型的变量都可以赋值为这两个值。

但是有时候,这并不是开发者想要的行为,也不利于发挥类型系统的优势。

const obj:object = undefined;
obj.toString() // 编译不报错,运行就报错

上面示例中,变量obj等于undefined,编译不会报错。但是,实际执行时,调用obj.toString()就报错了,因为undefined不是对象,没有这个方法。

为了避免这种情况,及早发现错误,TypeScript 提供了一个编译选项strictNullChecks。只要打开这个选项,undefinednull就不能赋值给其他类型的变量(除了any类型和unknown类型)。

下面是 tsc 命令打开这个编译选项的例子。

// tsc --strictNullChecks app.tslet age:number = 24;age = null;      // 报错
age = undefined; // 报错

在TS中null与undefined使用与js是有区别的,下面的代码是有问题的,因为null没有toLowerCase()方法。但默认是不报错的,在tsconfig.json配置文件中定义 "strictNullChecks":true"strict": true 将会对代码进行报错提示。

function render(content: string) {console.log(content.toLowerCase())
}render(null)

上面示例中,打开--strictNullChecks以后,number类型的变量age就不能赋值为undefinednull

这个选项在配置文件tsconfig.json的写法如下。

{"compilerOptions": {"strictNullChecks": true// ...}
}

打开strictNullChecks以后,undefinednull这两种值也不能互相赋值了。

// 打开 strictNullCheckslet x:undefined = null; // 报错
let y:null = undefined; // 报错

上面示例中,undefined类型的变量赋值为null,或者null类型的变量赋值为undefined,都会报错。

总之,打开strictNullChecks以后,undefinednull只能赋值给自身,或者any类型和unknown类型的变量。

let x:any     = undefined;
let y:unknown = null;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/28337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式开发工具代码

文章目录 将字符串中的小写字母转换为大写循环队列(Circular Buffer)断言(Assertion)位域反转(Bit Reversal)固定点数运算(Fixed-Point Arithmetic)字节序转换(Endiannes…

Rust创建基准测试bench

打开终端(或命令提示符)。 导航到父目录。 将 Rust 编译器切换到 nightly 版本: rustup default nightly 在该目录下运行 cargo init 命令来创建一个新的 Rust 项目,这将在当前目录下创建 Cargo.toml 和 src 目录: …

1430. 迷宫出口

一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由 ��nn 的格点组成,每个格点只有 22 种状态, 00 和 11,前者表示可以通行后者表示不能通行。 同时当Extense处在某个格点时,他只能移动到东南西北(或者说上下左右)四个方向之一的相邻格点上,Extense…

404 页面代码

<template> <div class"container"><h1>404</h1> <div ><p class"text-center">当前页面无法访问,可能没有权限或已删除</p><p class"text-center"> 去别处看看吧</p> </div> <…

Internet Download Manager(IDM6.41)软件安装包下载及安装教程

Internet Download Manager有一个智能下载逻辑加速器&#xff0c;具有智能动态文件分割和安全的多部分下载技术&#xff0c;可以加速下载。与其他下载加速器和管理器不同&#xff0c;Internet下载管理器在下载开始之前对文件进行分段&#xff0c;而Internet下载管理器在下载过程…

Web前端引用图:深度解析与实践指南

Web前端引用图&#xff1a;深度解析与实践指南 在Web前端开发中&#xff0c;引用图&#xff08;Dependency Graph&#xff09;是一个至关重要的概念&#xff0c;它有助于我们更好地理解和管理项目的依赖关系。www.rmrbggkd.com本文将从四个方面、五个方面、六个方面和七个方面…

[Linux] TCP协议介绍(2): TCP协议的“三次握手“过程分析、超时重传机制介绍...

上一篇文章中, 已经介绍了TCP协议的数据格式, 简单分析了其与UDP协议 关于可靠性方面的差异 本篇文章, 介绍分析一下 使用TCP协议通信, 非常重要的一个过程: 三次握手 TCP的"三次握手" TCP协议是有连接的传输层协议, 即使用TCP协议通信, 是需要建立连接的 TCP协议…

一千题,No.0070(组合数的和)

给定 N 个非 0 的个位数字&#xff0c;用其中任意 2 个数字都可以组合成 1 个 2 位的数字。要求所有可能组合出来的 2 位数字的和。例如给定 2、5、8&#xff0c;则可以组合出&#xff1a;25、28、52、58、82、85&#xff0c;它们的和为330。 输入格式&#xff1a; 输入在一行…

【Android面试八股文】HandlerThread是什么?有什么使用场景?

文章目录 一、HandlerThread是什么?1.1 HandlerThread 简介1.2 HandlerThread 源码分析1. 构造函数2. run 方法3. 获取 Looper4. 退出 Looper5. 总结二、HandlerThread有什么使用场景示例代码一、HandlerThread是什么? 1.1 HandlerThread 简介 HandlerThread 是 Android 提…

编程基础知识编程实例解析:深度探索与实战应用

编程基础知识编程实例解析&#xff1a;深度探索与实战应用 编程&#xff0c;作为现代信息社会的核心技能之一&#xff0c;对于理解和应用计算机技术具有至关重要的意义。然而&#xff0c;编程的深奥和复杂常常让人望而生畏。本文将从四个方面、五个方面、六个方面和七个方面对…

JVM-基础知识

JVM-基础知识 什么是JVM JVM是一种跨语言的平台&#xff0c;任何语言只要能编译成.class文件都可以被JVM运行。JVM只和.class文件有关系&#xff0c;和Java语言没关系。JVM是一种虚拟机规范。 java文件是如何交给JVM执行的 JVM的常见实现 HostStop:Oracle官方另外还有IBM的J9、…

Java--Arrays类

1.数组的工具java.util.Arrays 2.由于数组对象本身并没有什么方法可以供我们调用&#xff0c;但API中提供了一个工具类Arrays供我们使用&#xff0c;从而可以对数据对象进行一些基本的操作。 3.查看JDK帮助文档 4.Arrays类中的方法都是static修饰静态的静态方法&…

前端开发之计算机网络模型认识

上一篇&#x1f449;: 前端开发之HTTP3 文章目录 网络模型1.OSI七层模型详解1.应用层2.表示层3.会话层4.传输层5.应网络层6.数据链路层7.物理层 2.TCP/IP五层协议模型3.DNS解析过程及缓存4.HTTP长连接与短连接5.HTTPS的工作原理及与HTTP区别工作原理&#xff1a;在HTTP基础上加…

Spring多数据源管理方案

Spring多数据源管理方案 基于Spring的AbstractRoutingDataSource实现多数据源 数据库连接配置 spring:application:name: dynamic-sourcedatasource:datasource1:jdbc-url: jdbc:mysql://localhost:3306/cloud-demo?useUnicodetrue&characterEncodingutf-8&useSSLf…

【Python高级编程】图表类型指南:何时使用折线图、散点图、柱状图和饼状图

图表类型指南&#xff1a;何时使用折线图、散点图、柱状图和饼状图 在数据可视化中&#xff0c;选择合适的图表类型对于有效传达信息至关重要。以下是四种最常见的图表类型及其用途&#xff1a; 折线图 折线图用于显示数据随时间或其他连续变量的变化趋势。它们对于识别趋势…

MyBatis操作数据库(一)

什么是MyBatis? MyBatis是一个优秀的持久层框架&#xff0c;⽤于简化JDBC的开发。 MyBatis本是Apache的⼀个开源项⽬iBatis&#xff0c;2010年这个项目由apache迁移到了googlecode&#xff0c;并且改名为MyBatis。 简单来说MyBatis是更加简单完成数据和数据库交互的框架 什么…

前端根据权限生成三级路由

三级菜单和后端返回数组对比获取有权限的路由 数组&#xff1a; //后端返回的数组 const arr1 [sale.management, sale.order, sale.detail]; //前端路由 const arr2 [{path: "/sale-manage",redirect: "/sale-manage/sale-order/sale-list",name: sale…

CentOS下的miniconda3安装

软件下载与安装 下载 [pythoningdev ~]$ wget https://repo.anaconda.com/miniconda/Miniconda3-py38_4.12.0-Linux-x86_64.sh -O /tmp/Miniconda3-py38_4.12.0-Linux-x86_64.sh --2022-08-29 10:31:06-- https://repo.anaconda.com/miniconda/Miniconda3-py38_4.12.0-Linux…

2-6 基于matlab2018B的语音信号降噪和盲源分离GUI界面

基于matlab2018B的语音信号降噪和盲源分离GUI界面&#xff0c;包括维纳滤波&#xff0c;小波降噪、高通、低通、带通滤波&#xff0c;及提出的滤波方法。每个功能均展示降噪前后声音效果并外放出来。程序已调通&#xff0c;可直接运行。 2-6 语音信号降噪 盲源分离 GUI界面 - 小…

Java Mybatis plus 语法中 避免sql循环

1. 查出全部数据并进行数据筛选过滤 在一对多的情况时&#xff0c;我们想把多的对象集合set进一的里面&#xff0c;需要避免循环sql Overridepublic R<List<ExRecord>> getExRecordAll(ExRecord exRecord) {// 获取用户idInteger userId Math.toIntExact(Securit…