工作学习总结-angular中的安全导航符?.和ts中的非空断言操作符!.

我们先看一行代码：

  <img-loader [src]="pictureDatas[0]?.pictureUrl" useImg [spinner]="true"></img-loader>

其中 [src]=“pictureDatas[0]?.pictureUrl” 为什么这样写呢？这样写有什么作用的呢？我们先看一个概念—安全导航符。
安全导航符----?. 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。
pictureDatas[0]?.pictureUrl----如果pictureDatas[0]有值，就会取pictureDatas[0]中pictureUrl。如果pictureDatas[0]没有值，页面渲染加载的时候也不会报错。
如果pictureDatas[0]为null或者为undefined，页面都会报错。但是使用安全导航符就不会出现这个问题了，只是页面不会加载这个数据。
这个感觉还不错，可以用起来。

最后再加一个TypeScript的非空断言操作符!.

非空断言操作符
在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符!可以用于断言操作对象是非null和非undefined类型的。具体而言，运算x!产生一个不包含null和undefined的x的值。断言的形式类似于x和x as T，!非空断言操作符会从编译成的JavaScript代码中移除。

  // 使用--strictNullChecks参数进行编译
    function validateEntity(e?: Entity) {
        // 如果e是null或者无效的实体，就会抛出异常
    }
    
    function processEntity(e?: Entity) {
        validateEntity(e);
        let s = e!.name;  // 断言e是非空并访问name属性
    }

兼容性
这些新特性是经过设计的，使得它们能够在严格空检查模式和常规类型检查模式下都能够使用。尤其是在常规类型检查模式中，null和undefined类型会自动从联合类型中删除（因为它们是其它所有类型的子类型），!非空断言表达式操作符也被允许使用但是没有任何作用。因此，声明文件使用null和undefined敏感类型更新后，在常规类型模式中仍然是可以向后兼容使用的。

在实际应用中，严格空检查模式要求编译的所有文件都是null和undefined敏感类型。