TypeScript 中,! 是 非空断言操作符

在 TypeScript 中,!非空断言操作符 (Non-null Assertion Operator),它告诉 TypeScript:"这个值绝对不会是 nullundefined,请相信我"。

1. 基本用法

javascript 复制代码
let value: string | undefined = getValue(); // 假设 getValue() 可能返回 undefined
console.log(value.length); // ❌ TS 报错:'value' 可能是 undefined
console.log(value!.length); // ✅ 用 ! 断言 value 不是 undefined

注意! 只是告诉 TS 忽略检查,如果实际运行时 valueundefined,代码会崩溃!

2. 在 Vue + TS 中的使用

(1) 访问可能为 null/undefined 的 ref 值
javascript 复制代码
const tabId = ref<number | null>(null);
console.log(tabId.value!.toFixed(2)); // ❌ 运行时可能报错,因为 tabId.value 可能是 null

慎用 ,除非你确定 tabId.value 一定有值(比如在 onMounted 之后)。

(2) 访问模板 ref 的元素
javascript 复制代码
<template>
  <input ref="inputRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const inputRef = ref<HTMLInputElement | null>(null);

onMounted(() => {
  // 我们知道 mounted 后 inputRef 一定有值,所以可以用 !
  console.log(inputRef.value!.focus());
});
</script>
(3) 结合可选链 ?. 使用
javascript 复制代码
const data = { user: { name: "Alice" } };
console.log(data.user?.name); // "Alice"(安全访问)
console.log(data.user!.name); // "Alice"(强制断言 user 存在)

3. 替代方案(比 ! 更安全)

(1) 使用 ??|| 提供默认值
javascript 复制代码
const tabId = ref<number | undefined>(undefined);
console.log(tabId.value ?? 0); // 如果 undefined/null,返回 0
console.log(tabId.value || 10); // 如果 falsy(如 0、""、undefined),返回 10
(2) 使用 if 检查
javascript 复制代码
if (tabId.value !== undefined) {
  console.log(tabId.value.toFixed(2)); // TS 知道这里 tabId.value 是 number
}
(3) 使用 as 类型断言(谨慎使用)
javascript 复制代码
console.log((tabId.value as number).toFixed(2)); // 强制断言是 number

4. 什么时候用 !?什么时候不用?

情况 推荐方式 备注
确定变量一定有值 value! 比如 onMounted 后访问 ref
可能为 null/undefined value?.xxxvalue ?? defaultValue 更安全
第三方库返回的值 结合 if 检查或 !(确保文档说明非空) 避免盲目信任
相关推荐
IT_陈寒30 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser32 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan35 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family37 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_1 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理1 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发1 小时前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql
运维开发王义杰1 小时前
nodejs:揭秘 npm 脚本参数 -- 的妙用与规范
前端·npm·node.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 18 - Reactive:深入 Proxy 的设计思路
前端·vue.js