Angular中interface可选id报number|undefined无法分配给number如何解决

你遇到的类型报错本质是UserAccount的id字段被定义为可选类型，实际类型为number | undefined，但你调用的方法要求入参必须是number类型，TS检测到存在传入undefined的风险因此抛出提示。

• 方案1：拆分不同业务场景的接口类型（最推荐的源头解决方案）
  你的接口同时适配「创建用户」和「更新用户」两个场景，创建场景下确实不需要id，更新场景下id为必填项，因此可以用TS类型工具拆分接口，从类型定义层面避免问题：

// 基础用户账号通用字段
export interface UserAccountBase{
    firstName: string;
    lastName: string;
    mail: string;
    genderId: number;
    gender?: Gender;
    password: string;
    userName: string;
    login: string;
    useraccountTypeId: number;
    userAccountType?: UserAccountType;
    name?: string;
    commercialmail?: string;
    phone?: string;
    vatnumber?: string;
    truckId?: number;
    truck?: Truck;
}
// 创建用户场景用，无id字段
export interface UserAccountCreate extends UserAccountBase {}
// 已存在用户/更新用户场景用，id为必填项
export interface UserAccount extends UserAccountBase {
    id: number;
}

• 方案2：调用前做类型校验收窄类型
  如果暂时不想调整原有接口定义，可以在调用方法前先判断id是否存在：
  TS业务代码写法：

if (user.id) {
    // 代码块内TS会自动识别user.id为number类型，不会触发类型报错
    updateUser(user.id);
}

框架HTML模板写法（以Angular为例）：

<button *ngIf="user.id" (click)="updateUser(user.id)">更新用户</button>

• 方案3：确定id必存在时使用非空断言
  如果你的业务逻辑可以保证调用方法时id一定有值（比如只有从已生成的用户列表入口进入编辑页才会调用更新方法，列表返回的用户都自带id），可以用TS非空断言操作符!告知编译器该值不会为undefined：
  业务代码写法：updateUser(user.id!)
  模板写法：(click)="updateUser(user.id!)"
  注意该方案为兜底方案，需要确保业务逻辑确实能保证id存在再使用，避免运行时报错。

• 方案4：空值兜底赋值
  如果你的业务方法可以兼容默认id值（比如传0代表新建用户逻辑），可以用空值合并运算符设置兜底值：
  写法：updateUser(user.id ?? 0)

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