TypeScript 中如何正确为对象添加可选成员？

报错原因说明 #

1. 方案1的TS1162报错是因为?可选标记是TypeScript类型定义的专属语法，不能直接写在对象字面量的属性名后，不被对象语法支持。
2. 方案2的TS2339报错是因为TypeScript会自动推断对象初始化时的类型，初始定义中没有body属性，后续追加时就会触发属性不存在的校验错误。

正确实现方案 #

方案1：显式声明类型（推荐，类型安全度最高）

提前定义包含可选属性的类型，给对象标注该类型后即可正常追加可选属性：

// 定义类型时声明body为可选成员
type RequestConfig = {
  headers: Headers;
  method: 'GET' | 'POST';
  body?: string;
}

const initObject: RequestConfig = {
  headers: headers,
  method: method ?? 'GET', // 空值合并运算符比三目写法更简洁
}
if (method === 'POST') {
  initObject.body = body;
}

方案2：条件动态展开属性（最简洁，无需额外定义类型）

直接在对象字面量内通过三元判断+展开语法动态添加属性，连后续的if判断都可以省略，TypeScript会自动推断出正确的类型：

const initObject = {
  headers: headers,
  method: method ?? 'GET',
  // 仅当method为POST时才添加body属性
  ...(method === 'POST' ? { body } : {})
}

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