Angular开发WebRTC项目DialogData类型不兼容报错如何解决？

错误根因 #

你遇到的类型报错本质是TypeScript严格空类型检查下的类型不匹配问题：

• 你定义的DialogData接口中peerId是可选字符串类型，实际类型推导为string | undefined
• 你在joinCall = true的分支下给peerId赋值为null，null和undefined在TS严格模式下是完全独立的类型，无法互相赋值
• 原教程代码没有报错大概率是原项目的tsconfig.json中关闭了strictNullChecks配置，迁移后的新项目开启了严格空检查规则，因此触发了报错。

解决方法 #

方案1：直接替换null为undefined（推荐） #

可选属性本身就允许赋值为undefined，不需要修改接口定义，直接修改dialogData的赋值逻辑即可：

let dialogData : DialogData = joinCall ? ({ peerId: undefined, joinCall: true }) : ({ peerId: this.peerId, joinCall: false });

更简洁的写法是直接省略可选属性，不传的时候默认就是undefined：

let dialogData : DialogData = joinCall ? ({ joinCall: true }) : ({ peerId: this.peerId, joinCall: false });

方案2：修改DialogData接口允许null值 #

如果业务逻辑里确实需要用null标识peerId的空状态，直接修改接口定义即可：

export interface DialogData {
  peerId ?: string | null;
  joinCall: boolean
}

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

如果要完全对齐原教程的TS校验规则，可以在项目tsconfig.json中设置"strictNullChecks": false，但会降低项目的类型安全性，不建议使用。

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