ts 非空断言

非空断言（Non-null Assertion）是 TypeScript 提供的一种语法，用于在开发者明确知道某个值不会为 null 或 undefined 时，强制 TypeScript 停止对该值的 null 和 undefined 检查。

1. 非空断言的语法

非空断言使用 ! 符号，它放在变量后面。这个符号告诉 TypeScript：

• “我确信这个值不会是 null 或 undefined，请不要再进行类型检查。”

const value: string | null = "hello"; const length = value!.length; // 确保 value 不是 null 或 undefined

在这个例子中，value! 表示开发者确信 value 不是 null 或 undefined，即使类型声明中 value 可能为 null。使用 ! 后，TypeScript 会认为 value 始终是 string 类型。

2. 非空断言的使用场景

非空断言通常用于以下场景：

• 当你从某个操作中获取一个值，并且你确信它一定不会是 null 或 undefined 时。

  • 例如，某个函数或 API 返回的值，如果你已经根据上下文或逻辑推断该值是存在的，那么就可以使用非空断言来避免 TypeScript 提示错误。

  function getElementById(id: string): HTMLElement | null {
    return document.getElementById(id);  // 返回值可能是 HTMLElement 或 null
  }
  
  const element = getElementById("myElement");
  element!.innerText = "Hello, world!";  // 确保 element 不是 null
  

• 在你确定某个值在运行时会被赋值的情况下。

  • 如果你知道某个变量在某个时刻一定会被赋值（例如，它在构造函数中被初始化），你可以使用非空断言来避免 TypeScript 的 null 或 undefined 检查。

    class MyClass {
      private value!: string;  // 使用非空断言，表明 value 总会被初始化
    
      constructor() {
        this.value = "Hello";
      }
      
      printValue() {
        console.log(this.value);  // 不会报错，因为 value 已经被初始化
      }
    }
    

3. 非空断言的潜在问题

尽管非空断言可以减少类型检查，但它也会绕过 TypeScript 的类型安全机制。如果你错误地断言了一个值不会为 null 或 undefined，但实际上它可能为 null 或 undefined，会导致运行时错误。例如：

const value: string | null = null; console.log(value!.length); 
// 运行时错误：Cannot read property 'length' of null

这里，尽管你用 ! 强制 TypeScript 忽略了 null 检查，但实际运行时 value 为 null，所以会导致错误。

4. 非空断言与类型保护的比较

非空断言是一个“强制”语法，它告诉 TypeScript 忽略 null 和 undefined 检查。而类型保护是另一种手段，它是通过代码逻辑来确保变量在某个点上不会为 null 或 undefined。例如使用 if 检查：

const value: string | null = "hello"; 
if (value !== null) { console.log(value.length); 
// 类型检查通过，value 已经被确保不是 null }

类型保护是更安全的方式，因为它基于代码逻辑而不是强制断言。

5. 总结

• 非空断言通过 ! 强制 TypeScript 停止 null 和 undefined 检查。
• 它适用于开发者确定某个值不会是 null 或 undefined 时，但使用时需要小心，避免潜在的运行时错误。
• 当可以通过类型保护（例如 if (value !== null)）确保值不是 null 时，推荐使用类型保护。

非空断言的作用是让你在特定情况下更有控制权，但过度使用或错误使用可能会导致问题，因此需要在确信无误的情况下使用它。

原文地址：https://blog.csdn.net/weixin_51687565/article/details/144095408

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！