TypeScript中如何强制Theme含默认主题并保留主题名字面量类型？

要同时满足「强制包含默认主题」和「保留themeName字面量联合类型」的需求，核心是用泛型替代原有的固定类型定义，让TypeScript能够推断并保留具体的字面量，同时通过约束确保默认主题存在。

步骤1：重构ThemeOption为泛型接口 #

先让ThemeOption支持传入具体的themeName字面量类型：

interface ThemeOption<T extends string = string> {
  readonly themeName: T;
  readonly buttonColor: string;
  readonly textColor?: string;
  readonly backgroundColor?: string;
}

步骤2：定义泛型Theme类型 #

通过泛型约束T必须包含'themedefault'，同时明确options的结构：

type Theme<T extends string> = 'themedefault' extends T 
  ? {
      id: string;
      label: string;
      options: readonly [
        // 第一个元素必须是默认主题
        ThemeOption<'themedefault'>,
        // 后续元素是排除默认主题后的其他主题
        ...readonly ThemeOption<Exclude<T, 'themedefault'>>[]
      ];
    } 
  : never; // 如果T不包含默认主题，直接返回never类型报错

步骤3：用工具函数简化实例创建 #

写一个工具函数自动推断泛型T，避免手动指定联合类型：

const createTheme = <T extends string>(theme: Theme<T>) => theme;

实际使用示例 #

创建主题实例时，TypeScript会自动推断所有themeName的字面量，同时检查是否包含默认主题：

const changeThemes = createTheme({
  id: 'theme-set-1',
  label: '全局主题',
  options: [
    { themeName: 'themedefault', buttonColor: '#2196F3' },
    { themeName: 'dark', buttonColor: '#121212', backgroundColor: '#000' },
    { themeName: 'light', buttonColor: '#F5F5F5', textColor: '#333' }
  ] as const
});

// 提取主题名字面量联合类型
type ChangeThemeNames = typeof changeThemes['options'][number]['themeName'];
// 类型为：'themedefault' | 'dark' | 'light'

为什么原有方案失效？ #

原Theme类型中，options的后续元素是ThemeOption（themeName为string），当你用Theme标注对象时，TypeScript会自动把具体的字面量拓宽为string类型，导致提取时无法得到联合字面量。而泛型方案通过保留具体的T类型，避免了这种拓宽，同时通过约束确保默认主题必须存在。

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