非空断言

非空断言（Non-null Assertion）是 TypeScript 中的一种特殊类型的断言，允许你在编译时告诉编译器某个表达式不会是 null 或 undefined。它通过在变量或表达式后面加上 ! 来实现。非空断言主要用于以下几种情况：

使用场景

1. 避免可选链和空值检查

当你确定一个可选属性或变量不是 null 或 undefined 时，可以使用非空断言来避免多余的检查。

interface User {
  name?: string;
}

const user: User = { name: "Alice" };
console.log(user.name!.length); // 假设我们知道 user.name 不会是 undefined

2. DOM 操作

在处理 DOM 元素时，有时你可以确定某个元素一定存在，因此可以使用非空断言来简化代码。

const el = document.getElementById("myElement")!;
el.textContent = "Hello, world!";

在这个例子中，! 断言告诉编译器 document.getElementById('myElement') 返回的值不会是 null。

3. 函数返回值

如果你调用一个可能返回 null 或 undefined 的函数，但你确定这次调用不会返回这些值，可以使用非空断言。

function getItem(id: number): Item | null {
  // ...
}

const item = getItem(42)!; // 假设我们知道 getItem(42) 不会返回 null

注意事项

• 谨慎使用：非空断言应该小心使用，因为它绕过了编译器的类型检查。如果断言不正确，可能会导致运行时错误。

• 确保正确性：使用非空断言前，请确保你确实知道表达式的值不会是 null 或 undefined，以避免潜在的问题。

• 替代方案：考虑是否可以通过其他方式（如可选链、空值合并运算符等）来安全地处理 null 和 undefined 的情况，而不是直接使用非空断言。

示例

下面是一些具体的例子展示了非空断言的应用：

1. 简化 DOM 操作

// 不使用非空断言
const input = document.querySelector("input");
if (input) {
  input.value = "TypeScript";
}

// 使用非空断言
const input = document.querySelector("input")!;
input.value = "TypeScript"; // 编译器不再报错

2. 处理可选属性

interface User {
  name?: string;
}

const user: User = { name: "Alice" };
console.log(user.name!.length); // 假设我们知道 user.name 不会是 undefined

3. 函数返回值

function getOptionalValue(): string | null {
  return "some value";
}

const value = getOptionalValue()!;
console.log(value.length); // 假设我们知道 getOptionalValue() 不会返回 null

总结

非空断言是 TypeScript 中用于优化代码的一种工具，允许你在特定情况下告诉编译器某个表达式不会是 null 或 undefined。虽然它可以简化代码并提高开发效率，但也需要谨慎使用，以避免引入潜在的运行时错误。