TypeScript实现主题切换函数时类型不匹配报错是什么原因？

报错原因 #

你给nextTheme变量标注的类型是Theme（属于字符串字面量类型，合法值只有"light"和"dark"两个字符串），但实际给变量赋值的是接收Theme参数、返回Theme值的函数，两者类型完全不匹配，因此TS抛出类型错误。

正确的写法如下，可选两种标注方式：

export type Theme = "light" | "dark";

// 方式1：直接标注变量为函数类型
export const nextTheme: (current: Theme) => Theme = (current) => {
  switch (current) {
    case "light":
      return "dark";
    case "dark":
      return "light";
  }
};

// 方式2：标注函数返回值类型，TS会自动推断变量类型
export const nextTheme = (current: Theme): Theme => {
  switch (current) {
    case "light":
      return "dark";
    case "dark":
      return "light";
  }
};

如果逻辑足够简单，也可以直接用三目运算符简化，TS可以自动推断出正确的返回值类型，不需要手动标注：

export const nextTheme = (current: Theme) => current === 'light' ? 'dark' : 'light';

用枚举管理主题是否更优 #

分场景判断：

• 如果你的主题只有固定2-3种取值，当前的字面量联合类型已经足够好用，不需要额外引入枚举。字面量联合类型更轻量，编译后不会产生额外的JS代码，类型校验效果和枚举完全一致。
• 如果后续主题会扩展到3种以上，或者需要统一管理主题取值、映射主题对应的其他配置（比如色值、类名），用枚举会更方便维护，所有修改只需要调整枚举定义即可，不需要到处修改硬编码的字面量。

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