TypeScript中Parameters<TrackEvent>第二个参数意外返回never的解决方法

你的问题根源在于：TrackEvent是单泛型函数类型，当使用Parameters<TrackEvent>时，TypeScript会将泛型参数K、E、P解析为所有约束的交集——由于不同Events分支的事件名无重叠，keyof Events[K]的交集为空，导致第二个参数类型变成never。

要解决这个问题，我们可以把TrackEvent重构为联合函数类型，让它覆盖所有合法的事件参数组合，这样Parameters工具类型就能正确提取出所有合法的参数元组。

代码实现 #

export type Events = {
  car: {
    drive: { city: string };
  },
  plane: {
    fly: { country: string };
  }
};

// 生成所有合法的事件参数元组联合类型
type EventParams = {
  [K in keyof Events]: {
    [E in keyof Events[K]]: [tag: K, name: E, opts: Events[K][E]]
  }[keyof Events[K]]
}[keyof Events];

// 重新定义TrackEvent为接受任意合法参数元组的函数
export type TrackEvent = (...args: EventParams) => void;

const trackEvent: TrackEvent = (tag, name, opts) => console.log(tag, name, opts);

// 正常工作，类型校验通过
trackEvent('car', 'drive', { city: 'london' });
// 正确报错：第二个参数应为'fly'，opts结构不匹配
trackEvent('plane', 'drive', { country: 'uk' });

// 现在参数数组类型完全正确
const alternativeTrackEvent: EventParams = ['car', 'drive', { city: 'london'}];
// 用Parameters<TrackEvent>也能得到同样的类型
const alternativeTrackEvent2: Parameters<TrackEvent> = ['plane', 'fly', { country: 'france'}];

React组件中的用法 #

你可以直接把EventParams作为组件props的类型，实现参数的自动校验：

import React from 'react';

type ButtonProps = {
  eventParams?: EventParams;
  children?: React.ReactNode;
};

const Button: React.FC<ButtonProps> = ({ eventParams, children }) => {
  const handleClick = () => {
    if (eventParams) {
      trackEvent(...eventParams);
    }
  };

  return <button onClick={handleClick}>{children}</button>;
};

// 合法用法：类型自动校验通过
<Button eventParams={['car', 'drive', { city: 'london'}]}>开车</Button>
// 非法用法：TypeScript会直接报错
<Button eventParams={['plane', 'drive', { city: 'paris'}]}>错误示例</Button>

原理说明 #

通过映射类型EventParams，我们遍历了Events的每一个标签（car/plane）和对应的事件名（drive/fly），生成了每个合法组合对应的元组类型，最终形成元组的联合类型。这样TypeScript就能精准识别每个参数组合的类型，不管是直接调用函数还是传递参数数组，都能得到正确的类型提示和校验。

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