如何基于entity属性是否存在推断TypeScript中onClick的参数类型？

你的核心需求是让组件的onClick回调根据entity属性的存在与否自动切换参数规则，但原代码的泛型条件类型无法让TypeScript关联entity的存在状态与onClick的参数类型，导致类型检查失败。

可行的解决思路是用联合类型定义互斥的Props场景，让TypeScript明确区分两种逻辑分支：

基础实现方案 #

type SnakeOrCamelDomains = "light" | "switch" | "input_boolean" | "fan";
type EntityType = `${SnakeOrCamelDomains}.${string}`;

// 定义两种互斥的Props类型，消除类型歧义
type TestProps = 
  // 存在entity时，onClick必须接收对应字符串参数
  | { entity: EntityType; onClick: (entity: string) => void }
  // 不存在entity时，onClick无参数
  | { entity?: never; onClick: () => void };

function Test({ entity, onClick }: TestProps) {
  return <button onClick={() => {
    if (entity) {
      onClick(entity); // TypeScript能正确识别此时需要传入参数
    } else {
      onClick(); // TypeScript能正确识别此时不需要参数
    }
  }}>{entity}</button>;
}

泛型精确类型版本（可选） #

如果需要让onClick的参数类型与entity的具体泛型类型完全一致，可以调整为泛型版本：

type SnakeOrCamelDomains = "light" | "switch" | "input_boolean" | "fan";

type TestProps<S extends `${SnakeOrCamelDomains}.${string}`> = 
  | { entity: S; onClick: (entity: S) => void }
  | { entity?: never; onClick: () => void };

function Test<S extends `${SnakeOrCamelDomains}.${string}`>({ entity, onClick }: TestProps<S>) {
  return <button onClick={() => {
    if (entity) {
      onClick(entity);
    } else {
      onClick();
    }
  }}>{entity}</button>;
}

方案原理 #

联合类型让TypeScript能够明确追踪entity和onClick的关联关系：

• 当传入entity时，TypeScript自动匹配带参数的onClick类型
• 当不传入entity时，TypeScript匹配无参数的onClick类型
  条件判断时，TypeScript会通过entity的存在状态自动收窄类型，彻底解决原代码中的类型不匹配问题。

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