TypeScript中Button样式嵌套对象的类型适配与取值错误解决

问题场景 #

你定义了Button的样式对象和Props类型，但尝试通过variantStyles[variant][color]根据变体和颜色获取样式时，遇到以下TypeScript错误：

Element implicitly has an 'any' type because expression of type 'keyof colorProps' can't be used to index type 'string | colorProps | { [key: string]: string; } | variantProps'.
  Property 'cyan' does not exist on type 'string | colorProps | { [key: string]: string; } | variantProps'.ts(7053)

问题根源在于你定义的CustomProps类型过于宽泛，混合了字符串、多种对象类型，导致TypeScript无法准确推断variantStyles[variant]是一个可用color索引的对象。

解决方案 #

重新定义样式对象的类型，让它与variantProps和colorProps严格绑定，消除类型模糊性：

1. 定义精确的样式映射类型 #

替换原来的CustomProps和styleProps，使用更贴合实际结构的类型：

interface colorProps {
  cyan: string;
  white: string;
  gray: string;
}

interface variantProps {
  solid: string;
  outline: string;
}

// 每个变体对应的颜色样式映射，允许部分颜色存在（比如outline只定义了gray）
type VariantStyleMap = {
  [K in keyof variantProps]: Partial<Record<keyof colorProps, string>>;
};

// 基础样式的类型：每个变体对应一个字符串
type BaseStyleMap = Record<keyof variantProps, string>;

2. 修正样式对象的类型注解 #

将baseStyles和variantStyles的类型替换为新定义的精确类型：

const baseStyles: BaseStyleMap = {
  solid: 'xxx',
  outline: 'xxx',
};

const variantStyles: VariantStyleMap = {
  solid: {
    cyan: 'xxx',
    white: 'xxx',
    gray: 'xxx',
  },
  outline: {
    gray: 'xxx',
  },
};

3. 安全取值处理 #

由于ButtonProps中的variant和color是可选属性，取值时需要处理可能的undefined，可以通过默认值或可选链实现：

interface ButtonProps {
  href?: string;
  variant?: keyof variantProps;
  color?: keyof colorProps;
  className?: string;
}

// 示例：带默认值的取值函数
const getButtonStyle = (props: ButtonProps) => {
  // 设置默认变体和颜色
  const targetVariant = props.variant ?? 'solid';
  const targetColor = props.color ?? 'cyan';
  
  // TypeScript现在可以正确推断类型，不会报错
  const variantStyle = variantStyles[targetVariant][targetColor];
  
  // 兜底：如果对应颜色的样式不存在，返回基础样式
  return variantStyle ?? baseStyles[targetVariant];
};

// 或者直接使用可选链避免报错
const directStyle = variantStyles[props.variant]?.[props.color];

效果说明 #

新的VariantStyleMap严格绑定了变体与颜色样式的结构关系，TypeScript能够明确识别每个变体对应的是包含颜色键的对象，因此variantStyles[variant][color]的取值操作会被正确类型检查，不再抛出错误。

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