为什么我的“If”块无法在Typescript中充当打字机?

时间:2017-11-11 05:48:42

标签: angular typescript

我正在尝试使用Angular 4.4.6和Typescript 2.4.2编写应用程序。将“strictNullChecks”编译器选项设置为true。

在我的组件类的顶部,我声明了一个像这样的表单的属性:

BasicForm: FormGroup | null;

然后我在OnInit生命周期钩子中初始化我的表单。像这样:

ngOnInit(){
 this.BasicForm = new FormGroup({
   name : new FormControl('')
  });
}

问题

当我尝试在类方法中引用我的表单时,编译器对我大吼大叫,说“对象可能为空”...这使我感到困惑,因为我将引用包含在检查null的if块中。

myMethod(){
    if(this.BasicForm){
      let name = this.BasicForm.get('name').value;
    }
}

要解决这个问题,我必须在访问我的value属性之前添加一个非null断言运算符。就像这样:

myMethod(){
    if(this.BasicForm){
      let name = this.CampgroundForm.get('name')!.value;
    }
}

但我不喜欢使用它......这似乎与TS试图实现的目标相反。

为什么我的打字机不能控制流量分析?有没有比添加非空断言运算符更好的方法?

1 个答案:

答案 0 :(得分:2)

看起来null警告实际上是BasicForm.get()的结果。

解决方法可能会有点难看:

myMethod(){
    if(this.BasicForm){
        let prop = this.BasicForm.get('name');
        if (prop){
            let name = prop.value;
        }
    }
}

或者你可以尝试添加一个包装空检查逻辑的辅助方法:

myMethod(){
    let name = this._formGet('name');
    if(name){
        // do stuff with name
    }
}

_formGet(prop){
    let result;
    if(this.BasicForm){
        let prop = this.BasicForm.get('name');
        if (prop){
            result = prop.value;
        }
    }
    return result;
}

如果您要做很​​多事情,那么研究一些可以帮助您避免空检查的数据类型可能会有用:https://github.com/cbowdon/TsMonad#general-maybe-usage