如何在TypeScript中为枚举键对应对象传递关联值？

我们可以通过区分连接器的类型（实例/函数）来实现需求，同时保持TypeScript的类型安全性，避免滥用any：

1. 定义统一的连接器类型（可选但推荐） #

先给所有连接器定义一个公共类型，替代any，让类型检查更严谨：

// 根据实际连接器的公共方法/属性定义，这里以connect为例
type Connector = {
  connect: () => Promise<any>;
  // 可补充其他公共属性如disconnect、getAccount等
};

2. 优化connectorsByName的类型声明 #

把原来的any替换为实例或函数的联合类型，让TypeScript能正确推断每个值的类型：

enum ConnectorNames {
  Injected = 'MetaMask',
  WalletConnect = 'WalletConnect',
  WalletLink = 'Coinbase Wallet',
  Magic = 'Email',
}

const connectorsByName: { [K in ConnectorNames]: Connector | ((email: string) => Connector) } = {
  [ConnectorNames.Injected]: injected,
  [ConnectorNames.WalletConnect]: walletconnect,
  [ConnectorNames.WalletLink]: walletlink,
  [ConnectorNames.Magic]: magic,
};

3. 在组件中动态处理传参 #

遍历的时候，通过枚举值判断是否是Magic连接器，调用函数并传入指定字符串；其他连接器直接使用实例：

const TestComponent = () => {
  const [connector, setConnector] = useState<Connector | null>(null);
  const targetEmail = 'test@gmail.com'; // 你需要传入的目标字符串

  return (
    <>
      {Object.entries(connectorsByName).map(([name, connectorItem]) => {
        return (
          <div
            className="bg-white rounded-lg p-4 hover:cursor-pointer min-w-[25vw]"
            key={name}
            onClick={() => {
              let finalConnector: Connector;
              // 针对Magic连接器调用函数传参
              if (name === ConnectorNames.Magic) {
                finalConnector = connectorItem(targetEmail);
              } else {
                finalConnector = connectorItem;
              }
              setConnector(finalConnector);
            }}
          >
            {name}
          </div>
        );
      })}
    </>
  );
};

export default TestComponent;

另一种简化方式（通过typeof判断） #

如果不需要依赖枚举值判断，也可以直接通过typeof检测是否为函数：

onClick={() => {
  const finalConnector = typeof connectorItem === 'function' 
    ? connectorItem(targetEmail) 
    : connectorItem;
  setConnector(finalConnector);
}}

这样既满足了Magic连接器需要传参的需求，又能让其他连接器保持原有逻辑，同时保证了TypeScript的类型安全。

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