TS中的?/!/!!/as_ts !!-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45044349/article/details/125163886

本文详细解析了JavaScript中的类型检查操作符，包括`!`、`?`和`??`的用法。`!`用于逻辑取反和类型转换，`?`用于防御性编程，确保安全访问对象属性，而`??`则是空值合并操作符，提供默认值。此外，还介绍了类型断言`as`在强类型语言如TypeScript中的应用，用于缩小类型范围。通过对这些操作符的理解，开发者能更好地编写健壮的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题图示：

在这里插入图片描述

解决

<div id="page" ></div>
const a = document.getElementById('page')!

解释

!：

1、用在变量前表示取反

2、用在赋值的内容后时:表示类型推断排除null、undefined

表示确定某个标识符是有值的，跳过ts在编译阶段对它的检测

?:

它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行。

除了表示可选参数外，常用于防御性编程
当使用A对象属性A.B时，如果无法确定A是否为空，则需要用A?.B，表示当A有值的时候才去访问B属性，没有值的时候就不去访问，如果不使用?则会报错
但是?用法只能读操作而不能写操作，对一个可能为空的属性赋值是不会被编译通过的，此时还需用用到类型断言

!!与??:

!! 将一个其他类型转换成boolean类型，类似于Boolean()
?? 空值合并操作符，当操作符的左侧是null或者undefined时，返回其右侧操作数，否则返回左侧操作数
!!:
由于对null与undefined用 ! 操作符时都会产生true的结果，
所以用两个感叹号的作用就在于，
如果设置了o中flag的值（非 null/undefined/0""/等值），自然test就会取跟o.flag一样的值；
如果没有设置，test就会默认为false，而不是 null或undefined。

let ss:string|null|undefined=undefined;
console.log(ss??'你好');
//ss??'你好' 可以给ss添加默认值 '你好' 意思就是如果 ss有值而且不是null和undefined时，ss就是上面赋给的值，如果是null或者undefined，ss的值就是默认值'你好'

var o={flag1:true};  
var test1=!!o.flag1;//等效于var test1=o.flag1||false;  
console.log(test1);//true
var test2=!!o.flag2;//等效于var test2=o.flag2||false;  
console.log(test2);//false 而不是undefined 或 null

as:

把一个大的范围断言成小的、精确的范围

const activeDom = document.querySelector('.news_nav_item_active') as HTMLElement
userInfo: {} as IStoreObj, // 对象
memberList: [] as IStoreObj[], // 列表
const sign = route.query.sign as string
userSex: 0 as 0 | 1 | 2,
ddArr: [] as (string | number)[],