TypeScript 是一种由 Microsoft 开发的开源编程语言，是 JavaScript 的超集，它增加了静态类型、类、接口等特性，使得 JavaScript 代码更加可读、可维护、可靠。在 TypeScript 中，我们经常会遇到变量可能为 null 或 undefined 的情况，这时候就需要使用非空断言操作符。
非空断言操作符是什么？
非空断言操作符（!）是 TypeScript 中的一个语法糖，它表示一个变量不为 null 或 undefined。在变量名后面加上 ! 即可使用非空断言操作符，例如：
let name: string | null = getName(); console.log(name!.length);
在上面的代码中，变量 name 的类型是 string 或 null，但是我们使用了非空断言操作符 !，表示 name 不为 null，可以直接访问其属性 length。
非空断言操作符的使用场景
非空断言操作符的使用场景非常广泛，例如：
1. 访问对象属性
当我们访问一个对象属性时，如果对象可能为 null 或 undefined，就需要使用非空断言操作符。
let obj: { name?: string } = {};
console.log(obj.name!.length);在上面的代码中，对象 obj 的属性 name 可以为 undefined 或者不存在，但是我们使用了非空断言操作符 !，表示 name 不为 null 或 undefined，可以直接访问其属性 length。
2. 调用函数
当我们调用一个函数时，如果函数的返回值可能为 null 或 undefined，就需要使用非空断言操作符。
function getElementById(id: string): HTMLElement | null {
return document.getElementById(id);
}
const element = getElementById('app')!;在上面的代码中，函数 getElementById 的返回值可能为 null，但是我们使用了非空断言操作符 !，表示返回值不为 null，可以直接赋值给变量 element。
3. 类型断言
当我们进行类型断言时，如果类型可能为 null 或 undefined，就需要使用非空断言操作符。
let name: string | null = getName(); console.log((name! as string).length);
在上面的代码中，变量 name 的类型是 string 或 null，但是我们使用了非空断言操作符 !，表示 name 不为 null，可以进行类型断言。
注意事项
使用非空断言操作符虽然可以简化代码，但是需要注意以下几点：
1. 可能出现运行时错误
如果我们使用非空断言操作符访问 null 或 undefined，就会出现运行时错误。因此，我们需要在使用非空断言操作符之前，确保变量不为 null 或 undefined。
let name: string | null = getName();
if (name !== null) {
console.log(name!.length);
}在上面的代码中，我们使用 if 语句确保变量 name 不为 null，然后再使用非空断言操作符访问其属性 length。
2. 不要滥用非空断言操作符
使用非空断言操作符可以简化代码，但是不能滥用。如果我们滥用非空断言操作符，就会导致类型检查失效，增加代码出错的可能性。因此，我们应该尽量避免使用非空断言操作符。
3. 使用可选链操作符替代
在 TypeScript 3.7 中，引入了可选链操作符（?.），它可以用来访问可能为 null 或 undefined 的属性或方法。使用可选链操作符可以避免使用非空断言操作符，更加安全可靠。
let obj: { name?: { length: number } } = {};
console.log(obj.name?.length);在上面的代码中，我们使用可选链操作符 ?. 访问对象 obj 的属性 name，如果属性 name 存在，则返回其属性 length 的值，否则返回 undefined。
总结
非空断言操作符是 TypeScript 中的一个语法糖，可以用来表示一个变量不为 null 或 undefined。在使用非空断言操作符时，需要注意可能出现的运行时错误、不要滥用非空断言操作符、使用可选链操作符替代等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6640c284d3423812e4ed2d4d