TypeScript中如何将theme设为可选？问号与Partial工具类型选哪个？

我定义了以下TypeScript类型：

import { MyType, SectionTheme } from 'app/store/types';

export type Props = {
  data: MyType;
} & SectionTheme;

export type StylesProps = ThemeProps & Pick<Props, 'theme'>;

请问如何将theme字段设为可选？我是否需要修改SectionTheme类型，添加?，如下所示：

export type SectionTheme = {
  theme?: 'one' | 'two';
};

还是需要使用Partial工具类型？具体该如何操作？两者有什么区别，在我的场景中哪种方式更合适？

两种可行实现方式 #

1. 直接修改SectionTheme原类型

直接在SectionTheme的定义里给theme字段添加?标记，就像你示例中的写法：

export type SectionTheme = {
  theme?: 'one' | 'two';
};

这种方式会让所有引用SectionTheme的地方，theme字段都变成可选状态。

2. 使用Partial工具类型局部修改

如果不想改动原SectionTheme类型（比如其他场景还需要它的theme是必填项），可以在组合目标类型时用Partial单独将theme设为可选：

• 仅让Props里的theme可选：

export type Props = {
  data: MyType;
} & Partial<Pick<SectionTheme, 'theme'>>;

• 若SectionTheme只有theme这一个字段，也可以简化为：

export type Props = {
  data: MyType;
} & Partial<SectionTheme>;

• 如果是StylesProps需要theme可选，修改如下：

export type StylesProps = ThemeProps & Partial<Pick<Props, 'theme'>>;

两者核心区别 #

• 直接修改原类型：属于全局修改，所有用到SectionTheme的地方都会受影响。适合项目中所有SectionTheme的使用场景都不需要强制传theme的情况。
• 使用Partial：属于局部修改，仅在你指定的组合类型（比如Props或StylesProps）中让theme可选，原SectionTheme类型保持不变。适合仅当前场景需要theme可选，其他场景仍要求必填的情况。

你的场景推荐方案 #

如果SectionTheme是专为当前组件设计的，且所有使用它的场景都不需要强制传入theme，直接修改原类型加?是最简洁直观的选择。

如果SectionTheme在其他业务场景中还需要theme作为必填字段，那优先用Partial局部修改目标类型，避免影响其他模块的逻辑。

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