在 TypeScript 中，我们经常需要定义一些变量或者属性，有些时候我们并不知道变量的初始值是什么。这时候，如果在变量后面加上感叹号（!），就表示这个变量一定会有值。这个 操作符就是非空断言操作符。
非空断言操作符的作用
在 TypeScript 中，非空断言操作符可以用来告诉编译器，虽然这个变量现在还没有被初始化，但是在后面一定会被初始化而不需要对它做空值校验。
比方说，在创建一个 React 组件的时候，我们经常会声明一个 state 对象来存储组件的状态：
-- -------------------- ---- -------
--------- ----- -
----- -------
---- -------
-
----- ----------- ------- ------------------- ------ -
----- - -
----- --- -- ---------------
---- -
--
-在这个例子中，我们知道 name 一定会被初始化，但是 TypeScript 并不知道，此时我们就可以使用非空断言操作符：
state = {
name: '',
age: 0
} as State; // 在这里加上非空断言操作符这样，我们就可以告诉 TypeScript，state 一定是 State 类型的。
非空断言操作符的使用
非空断言操作符是在变量后面添加感叹号（!）来使用的。我们可以将它添加在变量和属性上。比如：
const user!: User;
在类的属性中使用时：
-- -------------------- ---- -------
--------- ----- -
------ -----
-
----- ----------- ------- ---------------------- -
-------- -
----- - ---- - - -----------
------ -
-----
------------ --- ---- ---- ------------------ ---
------
--
-
-非空断言操作符的注意事项
尽管非空断言操作符很方便，我们也要注意它的使用场景。
在某些时候，我们的变量并不是一定会有值的，可能会因为上游的错误导致变量为空。此时，非空断言操作符可能会掩盖这个错误，使其只在运行时才能被发现。
在实际的开发中，我们需要根据具体的场景来决定是否使用非空断言操作符。虽然 TypeScript 可以帮助我们进行空值校验，但是在一些情况下我们可以通过非空断言操作符来提高代码的简洁性和可读性。
结论
非空断言操作符是 TypeScript 非常有用的一个功能。在操作类似 React 或者 Vue 这样的框架开发时，可以更好地发挥其优势。但是在使用时需要注意，不能滥用这个操作符，否则可能会导致一些运行时错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eff78c6fbf960197317f6e