如何使用TypeScript对象扩展运算符添加可选属性？条件添加属性后类型不符合预期的问题

首先回答第一个问题：使用对象扩展运算符添加可选属性分静态和动态两种场景，下面分别说明：

静态添加可选属性 #

如果是明确要给对象添加固定的可选属性，有两种常用方式：

方式1：直接定义可选属性 #

在扩展的对象字面量里直接标记属性为可选，TS会自动识别它的可选状态：

const baseObj = { id: 123 };
const extendedObj = { ...baseObj, username?: string };
// 类型推断为：{ id: number; username?: string | undefined; }

这里的username?: string明确告诉TS这个属性是可选的，类型自然会包含undefined（因为可选属性本身就意味着可能不存在）。

方式2：结合Partial工具类型 #

如果有一组可选属性需要合并，可以用Partial把属性类型转为可选后再扩展：

const baseObj = { id: 123 };
const optionalAttrs: Partial<{ username: string; age: number }> = { username: "johndoe" };
const combinedObj = { ...baseObj, ...optionalAttrs };
// 类型推断为：{ id: number; username?: string; age?: number; }

解决你遇到的动态条件添加属性的类型问题 #

来看你写的代码：

const b = true;
const a = { ...(b !== undefined ? { b }: null ) };

你预期类型是{ b?: boolean; }，但实际得到{ b?: boolean | undefined; }，这个问题在TS 4.8.2里确实存在，核心原因是扩展null时，TS的类型推断会错误地把分支情况合并，引入多余的undefined类型。

修复方法1：用undefined代替null #

把空分支的null换成undefined，TS会更准确地推断类型——因为扩展undefined等价于不添加任何属性，不会让类型系统误以为属性可能被设置为undefined：

const b = true;
const a = { ...(b !== undefined ? { b } : undefined) };
// 现在类型符合预期：const a: { b?: boolean; }

修复方法2：使用类型断言（手动指定类型） #

如果你不想修改分支的值，可以用类型断言直接指定预期类型：

const b = true;
const a = { ...(b !== undefined ? { b } : null) } as { b?: boolean };

不过这种方式属于手动干预类型推断，不如第一种方法自然，建议优先用第一种。

为什么原来的代码会有问题？ #

在TS 4.8.2中，当你扩展null时，类型系统会把{ b: boolean }（属性存在的情况）和“无属性”的情况合并，错误地认为属性不存在时等价于值为undefined，最终推断出b的类型是boolean | undefined。而换成undefined后，TS明确知道这个分支不会添加任何属性，只会把属性标记为可选，类型就变成了boolean。

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