TypeScript React-Native中可选variant参数报undefined不可作为索引类型怎么解决

以下是三种可直接落地的修复方案，按推荐优先级排序：

方案1：样式回调解构时指定默认值（最推荐） #

无需改动现有Props定义和defaultProps，同时额外增加运行时容错能力：

export const Text = styled.Text<TextProps>`
  ${({ theme }) => defaultTextStyles(theme)}
  ${({ variant = "body", theme }) => variants[variant](theme)}
`;

解构时给variant指定默认值后，TypeScript会自动推断variant不可能为undefined，报错直接消除，即使后续defaultProps被误修改也不会触发运行时问题。

方案2：添加非空断言（最快修复） #

如果确定defaultProps一定会生效，variant不存在undefined的可能，可以直接用非空断言告诉TypeScript跳过空值检查：

export const Text = styled.Text<TextProps>`
  ${({ theme }) => defaultTextStyles(theme)}
  ${({ variant, theme }) => variants[variant!](theme)}
`;

该方案仅做类型层面绕开，无运行时保障，适合临时快速修复场景。

方案3：拆分Props类型明确默认值声明 #

如果希望TypeScript从类型层面识别defaultProps的默认值，可以拆分Props结构明确类型：

type Variants = "body" | "label" | "caption" | "error" | "hint";

interface TextBaseProps {
  theme?: DefaultTheme;
}
interface TextDefaultProps {
  variant: Variants;
}
// 对外暴露的Props将带默认值的字段设为可选
export type TextProps = TextBaseProps & Partial<TextDefaultProps>;

export const Text = styled.Text<TextProps>`
  ${({ theme }) => defaultTextStyles(theme)}
  ${({ variant, theme }) => variants[variant as keyof TextDefaultProps](theme)}
`;

// 明确defaultProps类型
Text.defaultProps = {
  variant: "body",
} as TextDefaultProps;

补充说明：React 18 官方已经不再推荐函数组件使用defaultProps，更推荐直接在组件参数中声明默认值，该写法TypeScript原生支持自动识别默认值，无需额外类型处理。

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