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

在 TypeScript 中，! 是 非空断言操作符 （Non-null Assertion Operator），它告诉 TypeScript："这个值绝对不会是 null 或 undefined，请相信我"。

1. 基本用法

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

注意 ：! 只是告诉 TS 忽略检查，如果实际运行时 value 是 undefined，代码会崩溃！

2. 在 Vue + TS 中的使用

(1) 访问可能为 null/undefined 的 ref 值

const tabId = ref<number | null>(null);
console.log(tabId.value!.toFixed(2)); // ❌ 运行时可能报错，因为 tabId.value 可能是 null

慎用 ，除非你确定 tabId.value 一定有值（比如在 onMounted 之后）。

(2) 访问模板 ref 的元素

<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) 结合可选链 ?. 使用

const data = { user: { name: "Alice" } };
console.log(data.user?.name); // "Alice"（安全访问）
console.log(data.user!.name); // "Alice"（强制断言 user 存在）

3. 替代方案（比 ! 更安全）

(1) 使用 ?? 或 || 提供默认值

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 检查

if (tabId.value !== undefined) {
  console.log(tabId.value.toFixed(2)); // TS 知道这里 tabId.value 是 number
}

(3) 使用 as 类型断言（谨慎使用）

console.log((tabId.value as number).toFixed(2)); // 强制断言是 number

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

情况	推荐方式	备注
确定变量一定有值	value!	比如 onMounted 后访问 ref
可能为 null/undefined	value?.xxx 或 value ?? defaultValue	更安全
第三方库返回的值	结合 if 检查或 !（确保文档说明非空）	避免盲目信任