TypeScript构建JSON时如何自动省略null/undefined可选字段？

我定义了包含可选字段的 TypeScript 接口myCompany，其中officeCode仅在hasOffice为true时适用。遍历myCompany数组构建payload时，当前写法会生成带officeCode: null的对象，我希望直接省略该字段。面对数十个可选字段，不想采用事后删除null字段的工具函数，请问有简便的实现方法？

接口定义 #

export interface myCompany {
    name: string,
    type: string,
    postal: number,
    hasOffice: boolean,
    officeCode?: string,
}

当前构建代码 #

companyArray.forEach((myCompany) => {
     payload.push({
         name: myCompany.name,
         type: myCompany.type,
         postal: myCompany.postal,
         hasOffice: myCompany.hasOffice,
         officeCode: myCompany.officeCode ? myCompany.officeCode : null,
     });
});

解决方法 #

方法一：利用对象展开运算符+条件判断 #

直接在构建对象时通过条件控制属性是否存在，写法简洁直观：

companyArray.forEach((item) => {
  const payloadItem = {
    name: item.name,
    type: item.type,
    postal: item.postal,
    hasOffice: item.hasOffice,
    // 仅当hasOffice为true且officeCode存在时，才添加该字段
    ...(item.hasOffice && item.officeCode ? { officeCode: item.officeCode } : {})
  };
  payload.push(payloadItem);
});

原理：对象展开运算符...会把右侧对象的属性合并到目标对象中。如果条件不满足，就展开一个空对象，自然不会添加多余字段。

方法二：封装复用工具函数（适合多可选字段场景） #

如果有大量类似的条件字段，写一个轻量工具函数统一处理，避免重复编写判断逻辑：

// 工具函数：条件满足时返回包含指定键值的对象，否则返回空对象
const addIf = <K extends string>(key: K, value: unknown, condition: boolean): Record<K, unknown> | {} => {
  return condition ? { [key]: value } : {};
};

// 构建payload时复用工具函数
companyArray.forEach((item) => {
  const payloadItem = {
    name: item.name,
    type: item.type,
    postal: item.postal,
    hasOffice: item.hasOffice,
    ...addIf('officeCode', item.officeCode, item.hasOffice && !!item.officeCode),
    // 其他可选字段直接复用，比如：
    // ...addIf('taxCode', item.taxCode, item.isRegistered),
    // ...addIf('contact', item.contact, item.hasContact)
  };
  payload.push(payloadItem);
});

方法三：优化类型定义（从源头避免冗余字段） #

如果希望TypeScript类型层面也能约束officeCode的存在性，可以把原接口拆分为联合类型，让类型系统自动校验字段的合理性：

// 有办公室的公司类型
type CompanyWithOffice = {
  name: string;
  type: string;
  postal: number;
  hasOffice: true;
  officeCode: string;
};

// 无办公室的公司类型
type CompanyWithoutOffice = {
  name: string;
  type: string;
  postal: number;
  hasOffice: false;
};

// 合并为联合类型
type myCompany = CompanyWithOffice | CompanyWithoutOffice;

这样在编写代码时，TypeScript会提示你只有hasOffice为true时才能访问officeCode，从源头避免了给不存在的字段赋值null的情况，生成的payload自然也不会有冗余字段。

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