为什么TypeScript无法将字符串赋值给class-variance-authority生成的类型？

我使用class-variance-authority定义了Button组件，代码如下：

const buttonVariants = cva('...',
  {
    variants: {
      variant: {
        a: '...',
        b: '...',
        c: '...',
      }
    },
    defaultVariants: { variant: 'a' }
  } 
);

export type ButtonProps = {
  label: string;
  ...
} & VariantProps<typeof buttonVariants>;


export default function Button({ variant }: ButtonProps) {
  ...
}

之后在页面中这样使用该组件：

const typeA = 1;
const typeB = 2;
const typeC = 3;

const variants: { [key: number]: string } = {
  [typeA]: 'a',
  [typeB]: 'b',
  [typeC]: 'c',
};

return (
  <div class="flex gap-2">
    {buttons.map((button) => (
      <Button variant={variants[button.type]} />
    ))}
  </div>
)

此时TypeScript报错，“variant”参数下出现如下错误提示：

Type 'string' is not assignable to type '"a" | "b" | "c" | undefined'.

错误原因分析 #

核心问题是类型信息丢失导致的类型范围不匹配：

• Button组件的variant参数类型，是通过VariantProps<typeof buttonVariants>推导出来的具体字面量联合类型："a" | "b" | "c" | undefined，只接受指定的三个值或undefined
• 你给variants对象手动标注了类型{ [key: number]: string }，强制把对象的取值类型定为宽泛的string，彻底丢失了"a"/"b"/"c"这些具体值的字面量类型信息
• 即便不手动标注类型，TypeScript默认也会把对象值推断为string（而非字面量类型）——因为它无法确定你后续会不会修改这个对象的属性值，所以会自动放宽类型范围

宽泛的string类型包含无数可能的字符串值，TypeScript无法保证variants[button.type]的结果一定是Button组件允许的那三个值，因此抛出类型不兼容的错误。

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