TypeScript：非空断言操作符（!.）-马育民老师

# 介绍

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

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

### 适用场景

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

# 语法

断言 **左侧变量 非 `null`/`undefined`**
```typescript
变量!.属性/方法;
```

# 例子

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

比如变量声明时类型包含 `undefined`，但运行时会提前赋值，编译器无法感知：
```typescript
// 声明变量：类型为 string | undefined
let username: string | undefined;

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

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

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

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

DOM 操作中，`document.getElementById` 返回值类型是 `HTMLElement | null`，但你确认元素一定存在时：
```typescript
// 编译器默认认为 btn 可能是 null，直接访问 onclick 会报错
// const btn = document.getElementById("submit-btn");
// btn.onclick = () => {};

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

### 嵌套对象的非空断言

配合可选链 `?.` 或可选属性，断言某个嵌套属性一定存在：
```typescript
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`，但你确认本次调用一定返回有效值：
```typescript
// 函数返回值：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')` 错误：
```typescript
let username: string | undefined;
// 编译通过，但运行时报错：Cannot read properties of undefined (reading 'length')
console.log(username!.length); 
```

### 避免滥用 `!.` 优先用类型守卫（更安全）
`!.` 是“暴力消除警告”的方式，滥用会失去 TypeScript 类型检查的意义。**优先用类型守卫（条件判断）确保值非空**，仅在确认无误时使用 `!.`：
```typescript
let username: string | undefined;

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

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

### 不能用于赋值操作
`!.` 仅用于**访问属性/调用方法/访问数组元素**，不能用于赋值，否则编译报错：
```typescript
let username: string | undefined;

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

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

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

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

原文出处：https://malaoshi.top/show_1GW2Qc7wVxGY.html