React+TypeScript中null!非空断言运算符的作用疑问

先直接说结论：这里的!是TypeScript的非空断言操作符，和Dart里的同名写法确实不一样，完全是给编译器看的提示。

具体作用 #

在你写的const inputRef = useRef<HTMLInputElement>(null!);这段代码里：

• 原本直接传null的话，TypeScript会推断inputRef的类型是React.MutableRefObject<HTMLInputElement | null>——因为初始化给了null，编译器认为这个ref的current属性可能一直是null。
• 加了!之后，你是在告诉TS编译器：“我保证这个ref的current属性最终会被赋值为有效的HTMLInputElement，你不用把null纳入类型考量”。这样inputRef的类型就变成了React.MutableRefObject<HTMLInputElement>，后续使用inputRef.current的时候，就不用每次都写inputRef.current?.focus()这种非空判断，直接调用方法就行。

和Dart的核心差异 #

Dart里的!是运行时的空值断言——如果运行时这个值真的是null，会直接抛出NullPointerException，相当于强制让程序“这个值肯定不是null，否则崩溃”。
但TypeScript的!只是编译期的提示，完全不会影响运行时代码。如果实际运行时inputRef.current还是null，调用它的方法照样会报错，只是TS编译器不会在编译阶段给你抛类型错误。

必要性的考量 #

这个!不是必须的：

• 如果能接受每次使用ref时都做非空判断（比如inputRef.current?.focus()），完全可以不加，直接写const inputRef = useRef<HTMLInputElement>(null);。
• 只有当你100%确定这个ref会在组件挂载后被绑定到真实DOM（比如通过JSX的ref={inputRef}），后续使用时不可能为null，这时候加!可以简化代码，避免冗余的类型检查。

⚠️ 注意：别滥用这个操作符，如果你的ref可能存在未绑定DOM的情况（比如条件渲染的元素），用!会埋下运行时错误的隐患，这时候老老实实做非空判断更稳妥。

内容的提问来源于stack exchange，提问作者Yukinosuke Takada