介绍

!. 是 非空断言操作符，告诉编译器：“这个变量一定不是 null 或 undefined，请不要报空值相关的错误”。

不会改变运行时逻辑，仅用于消除编译阶段的类型检查警告

适用场景

当你明确知道某个值不可能是 null/undefined，但 TypeScript 编译器无法静态推导出这一点时，用 !. 覆盖编译器的类型判断。

语法

断言 左侧变量非 null/undefined

变量!.属性/方法;

例子

消除“可能为 undefined”的编译警告

比如变量声明时类型包含 undefined，但运行时会提前赋值，编译器无法感知：

// 声明变量：类型为 string | undefined
let username: string | undefined;

// 运行时提前赋值（编译器不知道这一步）
username = "张三";

// 不加 !.：编译器报错“对象可能为 undefined”
// console.log(username.length); 

// 加 !.：断言 username 非空，消除警告
console.log(username!.length); // 输出：2

访问 DOM 元素（确保元素一定存在）

DOM 操作中，document.getElementById 返回值类型是 HTMLElement | null，但你确认元素一定存在时：

// 编译器默认认为 btn 可能是 null，直接访问 onclick 会报错
// const btn = document.getElementById("submit-btn");
// btn.onclick = () => {}; 

// 用 !. 断言 btn 非 null
const btn = document.getElementById("submit-btn")!;
btn.onclick = () => { console.log("点击了按钮"); };

嵌套对象的非空断言

配合可选链 ?. 或可选属性，断言某个嵌套属性一定存在：

interface User {
  info?: {
    age: number;
  };
}

const user: User = { info: { age: 20 } };

因为 user.info 是可选参数，编译器认为 user.info 可能是 undefined，所以直接访问 age 会报错：

console.log(user.info.age);

用 !. 断言 user.info 非空

console.log(user.info!.age); // 输出：20

函数返回值的非空断言

函数返回值类型包含 null/undefined，但你确认本次调用一定返回有效值：

// 函数返回值：string | null
function getConfig(key: string): string | null {
  const config = { "api": "https://example.com" };
  return config[key] ?? null;
}

// 断言本次调用返回值非 null，消除警告
const apiUrl = getConfig("api")!;
console.log(apiUrl); // 输出：https://example.com

注意

仅作用于编译阶段，运行时无保护

!. 只是“告诉编译器”值非空，不会在运行时做任何检查。如果运行时该值实际是 null/undefined，依然会抛出 Cannot read properties of null (reading 'xxx') 错误：

let username: string | undefined;
// 编译通过，但运行时报错：Cannot read properties of undefined (reading 'length')
console.log(username!.length);

避免滥用 `!.` 优先用类型守卫（更安全）

!. 是“暴力消除警告”的方式，滥用会失去 TypeScript 类型检查的意义。优先用类型守卫（条件判断）确保值非空，仅在确认无误时使用 !.：

let username: string | undefined;

// 推荐：类型守卫（安全，运行时也会检查）
if (username) {
  console.log(username.length); // 无警告，且运行时安全
}

// 不推荐（除非100%确认）：直接用 !.
// console.log(username!.length);

不能用于赋值操作

!. 仅用于访问属性/调用方法/访问数组元素，不能用于赋值，否则编译报错：

let username: string | undefined;

// 报错：非空断言不能用于赋值左侧
// username! = "李四"; 

// 正确：赋值无需断言（直接赋值会覆盖 undefined）
username = "李四";

使用原则

尽量少用：只有当你能 100% 保证值非空，且类型守卫无法覆盖时（如 DOM 元素、运行时提前赋值的变量），才使用 !.；
避免全局滥用：不要用 !. 批量消除警告，否则会引入运行时空值错误的风险；
结合注释：如果必须使用 !.，建议加注释说明“为什么该值非空”，方便后续维护。

总结

!. 是 TypeScript 中“绕过编译器空值检查”的工具，核心价值是解决“编译器无法感知的非空场景”，但运行时无任何保护。使用时需谨慎，优先通过类型守卫、初始化赋值等方式让编译器自动推导类型，仅在必要时用 !. 兜底。

原文出处：/show_1GW2Qc7wVxGY.html

介绍