如何在TypeScript中为Button组件定义兼容多类型的icon属性？

问题背景 #

为Button组件定义的icon属性支持传入字符串、数组、自定义对象（含name/size/color）以及FontAwesome导入的图标对象，但在组件中直接访问icon.size/icon.name/icon.color时，TypeScript报错：Property 'size' does not exist on type 'IconType | IconProp'。

现有代码 #

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { SizeProp, IconProp } from '@fortawesome/fontawesome-svg-core'

export interface IconType {
  name: IconProp
  size: SizeProp
  color?: string
}

export interface ButtonProps {
  icon: IconType | IconProp
}

const Button: React.FC<ButtonProps> = ({ icon }: ButtonProps) => {
  return (
    <button>
      <FontAwesomeIcon size={icon.size} icon={icon.name || icon} color={icon.color} />
    </button>
  )
}

export default Button

支持的传入方式 #

import { faHome } from '@fortawesome/free-solid-svg-icons'

<Button icon="home" /> // 字符串类型
<Button icon={["fab", "github"]} /> // 双元素字符串数组
<Button icon={{ color: "red", size: "2x", name: "home"  }} /> // 自定义对象（color可选）
<Button icon={faHome} /> // 从FontAwesome库导入的图标

解决方案 #

核心思路是用类型守卫区分IconType和IconProp类型，让TypeScript明确当前icon的具体类型，从而安全访问对应属性。

步骤1：定义类型守卫函数 #

在组件文件中添加一个类型守卫函数，用来判断传入的icon是否为自定义的IconType类型：

// 类型守卫：判断icon是否为IconType类型
function isIconType(icon: IconType | IconProp): icon is IconType {
  // IconType是对象、非数组且包含name属性
  return typeof icon === 'object' && !Array.isArray(icon) && 'name' in icon;
}

步骤2：修改组件逻辑 #

在组件中通过类型守卫分支处理两种类型的icon，分别组装FontAwesomeIcon需要的属性：

const Button: React.FC<ButtonProps> = ({ icon }) => {
  let faIconProps;

  if (isIconType(icon)) {
    // 处理自定义IconType对象：提取name、size、color
    faIconProps = {
      icon: icon.name,
      size: icon.size,
      color: icon.color
    };
  } else {
    // 处理IconProp类型：直接传入icon，其他属性用默认值
    faIconProps = {
      icon: icon
    };
  }

  return (
    <button>
      <FontAwesomeIcon {...faIconProps} />
    </button>
  );
};

原理说明 #

TypeScript的联合类型仅允许访问所有类型共有的属性，IconProp类型（字符串、数组、IconLookup）并不包含size/name/color属性，因此直接访问会报错。通过类型守卫函数，我们可以在运行时判断icon的具体类型，并在编译时告诉TypeScript当前分支下的类型信息，从而安全访问对应属性。

如果需要给非自定义类型的icon设置默认的size或color，可以在else分支中添加对应属性，比如：

faIconProps = {
  icon: icon,
  size: '1x', // 默认size
  color: '#333' // 默认color
};

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