TypeScript可选属性值为undefined时键不显示，如何将其设置为null？

核心原因 #

你初始化的financialAccount本身就是空对象，未赋值的可选属性根本不存在于对象实例上，所以console.log不会输出这些不存在的键。另外TypeScript的interface仅在编译阶段生效，运行时不会保留任何接口的属性信息，所以你需要先显式声明所有属性的集合，再统一给对象补全属性。

方案1：手动枚举属性（推荐，适配所有场景） #

先把FinancialAccountInputModel的所有属性列成固定数组，遍历数组给对象补全属性，只有值为undefined的属性会被设为null，不会覆盖0、空字符串这类合法的假值：

// 按接口定义列出所有属性
const ACCOUNT_ALL_FIELDS: Array<keyof FinancialAccountInputModel> = ['id', 'code' /* 剩余20+属性依次补充 */];

// 遍历补全属性
const processedAccount = ACCOUNT_ALL_FIELDS.reduce((result, field) => {
  result[field] = financialAccount[field] ?? null;
  return result;
}, {} as FinancialAccountInputModel);

console.log(processedAccount); // 所有属性都会显示，未赋值的为null

方案2：用类+默认值替代interface（适合重复复用场景） #

如果不想每次都手动列属性数组，可以把interface替换为类，给所有属性设置默认值为null，实例化后自动携带所有属性：

export class FinancialAccountInputModel { 
  id?: number | null = null;
  code?: string | null = null;
  // 剩余所有属性都设置默认值为null
}

// 实例化后直接赋值即可
const financialAccount = new FinancialAccountInputModel();
// 比如赋值 financialAccount.id = 1001
console.log(financialAccount); // 所有属性都存在，未赋值的为null

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