如何在React中检查Icon组件的variant属性值合法性？

我有一个Icon组件，通过variant属性指定图标名称来渲染对应图标，使用方式如下：

<Icon variant="add" />

通过以下方式获取组件的Props类型：

type IconProps = React.ComponentProps<typeof Icon>;
// IconProps["variant"] 的类型为 "add" | "remove" | "plus" | "minus"

想实现类似这样的逻辑：当传入的变体名称合法时使用它，不合法则 fallback 到默认的"add"，但直接写"download" in IconProps["variant"]这种方式行不通，该怎么处理？

核心问题说明 #

TypeScript的类型是编译时概念，运行时完全不存在，所以直接用类型来做运行时判断是不可能的。必须把合法的变体值同步到运行时环境中，同时让类型从这些运行时数据推导出来，才能兼顾编译时类型检查和运行时合法性验证。

解决方案1：同步运行时有效值与类型 #

1. 先定义包含所有合法变体的常量数组（运行时可用）：

const VALID_ICON_VARIANTS = ["add", "remove", "plus", "minus"] as const;

2. 从这个数组推导variant的类型（确保类型和运行时值一致）：

type IconVariant = typeof VALID_ICON_VARIANTS[number];
// 如果是已有组件，也可以这样关联类型：
// type IconProps = React.ComponentProps<typeof Icon>;
// const VALID_ICON_VARIANTS: readonly IconProps["variant"][] = ["add", "remove", "plus", "minus"] as const;

3. 编写校验函数：

const isValidIconVariant = (value: unknown): value is IconVariant => {
  return typeof value === "string" && VALID_ICON_VARIANTS.includes(value as IconVariant);
};

4. 使用时的逻辑：

const targetVariant = "download";
<Icon variant={isValidIconVariant(targetVariant) ? targetVariant : "add"} />

解决方案2：在Icon组件内部做统一校验（更推荐） #

把校验逻辑封装在Icon组件内部，外部使用时无需重复判断，同时自动处理非法值：

const VALID_ICON_VARIANTS = ["add", "remove", "plus", "minus"] as const;
type IconVariant = typeof VALID_ICON_VARIANTS[number];

const Icon = ({ variant = "add" }: { variant?: IconVariant }) => {
  // 校验并获取合法的变体值
  const validVariant = VALID_ICON_VARIANTS.includes(variant as IconVariant) ? variant : "add";

  // 根据合法变体渲染对应图标
  switch (validVariant) {
    case "add":
      return <svg>/* add图标内容 */</svg>;
    case "remove":
      return <svg>/* remove图标内容 */</svg>;
    case "plus":
      return <svg>/* plus图标内容 */</svg>;
    case "minus":
      return <svg>/* minus图标内容 */</svg>;
    default:
      return <svg>/* add默认图标内容 */</svg>;
  }
};

这种方式下，TypeScript在编译时会提示非法的variant值（如果是TS环境），运行时即使传入非法值，组件也会自动 fallback 到默认图标。

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