Typescript：无法读取null的属性'long_name'

Question

我尝试使用TypeScript official documentation. Non-null assertion operator下面显示的代码：

    let streetNumberComponent  = this.getAddressComponent(addressComponents, 'street_number');
    address.streetNumber = streetNumberComponent!.long_name();

    ...

    public getAddressComponent(addressComponents: Array<any>, type: string): any {

        addressComponents.filter( component => {
            let types : Array<string> = component.types;
            if(_.includes(types, type)) {
                return component;
            }
        });

        return null;
    }

我预计仅当long_name()不是streetNumberComponent时才会访问媒体资源null。但事实并非如此，我得到了：

TypeError: Cannot read property 'long_name' of null

请注意，以下代码可以正常工作：

address.streetNumber = streetNumberComponent && streetNumberComponent.long_name();

我正在使用：

• TypeScript： 2.0.10
• Angular： 2.3.1
• Angular CLI： 1.0.0-beta.24

Answer 1

非空断言运算符仅用于打字稿，它不能在编译过程中存活，并且不存在于js代码中。正如文档中所述：

  这个！非空断言运算符只是在发出的中删除   JavaScript代码

这个运算符并没有真正检查它之前的内容是不是null，它只是一种告诉编译器你确定它不是null的方法，即使编译器无法推断它自己

显然，当您运行此代码时，streetNumberComponent为空。