如何为clsx设置回退类，解决LoadingSpinner组件的TypeScript类型报错？

问题根源 #

你遇到的类型错误核心原因是：clsx的返回类型被TypeScript推断为string | undefined，但LoadingSpinner组件要求size必须是"sm" | "md" | "lg" | "xl" | undefined这种字面量联合类型。哪怕你在clsx里传入的是具体的'sm'、'md'，clsx的类型定义也会把这些值拓宽成通用的string类型，导致和组件的类型要求不兼容。

解决方法 #

方法1：用条件表达式替代clsx（最安全，无需类型断言）

直接用嵌套三元表达式，TypeScript能准确推断出返回的是指定的字面量类型：

<LoadingSpinner
  color={spinnerColor}
  size={size === 'sm' || size === 'md' ? 'sm' : size === 'lg' ? 'md' : undefined}
/>

方法2：给clsx结果添加类型断言

如果你坚持要用clsx，可以手动把结果断言成组件接受的类型（注意要确保逻辑不会返回无效值，避免运行时问题）：

<LoadingSpinner
  color={spinnerColor}
  size={clsx(
    size === 'sm' && 'sm',
    size === 'md' && 'sm',
    size === 'lg' && 'md',
  ) as "sm" | "md" | undefined}
/>

方法3：写一个类型安全的映射函数

把size的映射逻辑抽成函数，明确指定返回类型，既保证类型安全又让代码更清晰：

// 定义映射函数
const getSpinnerSize = (size: string): "sm" | "md" | undefined => {
  switch (size) {
    case 'sm':
    case 'md':
      return 'sm';
    case 'lg':
      return 'md';
    default:
      return undefined;
  }
};

// 使用组件
<LoadingSpinner
  color={spinnerColor}
  size={getSpinnerSize(size)}
/>

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