Angular 4中为接口类型变量赋值null报错，如何解决？

这个错误我在Angular项目里碰到过好多次，本质是TypeScript默认开启的**严格空检查（strictNullChecks）**在起作用——它不允许你把null赋值给一个只声明为StatusDetail类型的变量，因为null不在这个类型的合法取值范围内。下面给你几个实用的解决方法：

方法1：允许变量为null或StatusDetail类型 #

修改组件中statusDetail的类型定义，用联合类型明确允许它取null值：

export class EditComponent implements OnInit{
  // 用联合类型扩展合法取值范围
  statusDetail: StatusDetail | null;
  
  ngOnInit() {
    // 注意：必须先初始化对象，否则直接赋值属性会报"Cannot set property of undefined"错误
    this.statusDetail = {
      statusName: 'text Status',
      name: 'text Name'
    };
  }

  SetNull() { 
    this.statusDetail = null; // 现在类型检查通过，不会报错了
  }
}

这样TypeScript就明确知道这个变量既可以是StatusDetail结构的对象，也可以是null，赋值操作自然合法。

方法2：重置为符合接口的空对象（替代null） #

如果你不需要将变量设为null，只是想重置为初始空状态，可以赋值一个完全符合StatusDetail接口结构的空对象：

SetNull() { 
  this.statusDetail = {
    statusName: '',
    name: ''
  };
}

这种方式既保持了类型的纯粹性，还能避免后续访问属性时可能出现的空值报错，适合不需要彻底清空引用的场景。

方法3：关闭严格空检查（不推荐） #

你可以在项目根目录的tsconfig.json中关闭strictNullChecks选项：

{
  "compilerOptions": {
    "strictNullChecks": false,
    // 其他编译配置...
  }
}

但这种方法非常不建议使用——关闭严格空检查会让TypeScript失去对空值的类型安全校验，很容易埋下潜在的运行时错误，违背了使用TypeScript的初衷。

额外提醒：修复初始化的隐藏问题 #

你原来的ngOnInit代码存在一个运行时隐患：直接给this.statusDetail.statusName赋值时，statusDetail只是声明了类型但未初始化，运行时会抛出Cannot set property 'statusName' of undefined错误。所以一定要先给statusDetail赋值一个符合接口的对象，再修改它的属性，就像方法1的示例那样。

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