Angular中constructor构造参数如何接受null值及新旧项目报错差异原因

报错原因 #

两个项目的TypeScript编译配置不一致导致的差异：

• 旧项目的tsconfig.json中关闭了strictNullChecks配置项（或者没有开启strict严格模式，strictNullChecks默认会随strict同步开启）。关闭该配置时，TypeScript会把null和undefined当做所有类型的子类型，允许直接赋值给任意类型的变量/参数，所以不会触发报错。
• 新项目开启了strictNullChecks，此时类型检查会严格区分非空类型和空值，null不能直接赋值给声明为UserInfo类型的参数，因此抛出类型不匹配错误。

解决方法 #

如果要让构造参数合法接受null，优先推荐按如下方式修改AccountStateModel的定义，保留严格类型检查的安全收益：

1. 先修改构造函数的currentUser参数类型，添加null联合类型
2. 同步修改类属性currentUser的类型，保持和参数类型一致

修改后的代码如下：

export class AccountStateModel extends BaseStatePartModel
{
    isLoggedIn:boolean;
    // 同步修改属性类型为联合类型
    currentUser:UserInfo | null;
    // 构造参数添加null类型
    constructor(currentUser:UserInfo | null,isLoggedIn:boolean)
    {
        super();
        this.currentUser=currentUser;
        this.isLoggedIn=isLoggedIn;
        this.stateKey=StateKeys.USER;
        this.keepInStorage=true;
    }
}

如果只是临时复用代码不想调整类型定义，也可以使用类型断言绕过检查，该方案会失去对应参数的类型校验能力，不推荐长期使用：

accountState: AccountStateModel = new AccountStateModel(null as UserInfo, false);

如果希望和旧项目保持一致的宽松检查，也可以在新项目的tsconfig.json中将strictNullChecks设置为false，该方案会关闭全项目的严格空校验，会丢失大量类型安全保障，非常不推荐。

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