TypeScript输入属性条件类型问题：handler参数隐式为any求解

问题核心在于input函数没有使用泛型，导致TypeScript无法根据传入的type字段精确推断handler的具体类型。当调用input时，TProps默认使用联合类型TInputType，handler的类型会变成THandler<number> | THandler<string>，TypeScript无法确定具体分支，只能将参数推断为any。

解决方案 #

把input改成泛型函数，让TypeScript能自动根据传入的props推断泛型参数：

type TInputType = 'text' | 'number' | 'date';

type THandler<V> = (e: Event, data: { value: V }) => void;

type TProps<T extends TInputType = TInputType> = {
  type: T;
} & (
  T extends 'number' ? {
    value: number;
    handler: THandler<number>;
  } : {
    value: string;
    handler: THandler<string>;
  }
);

// 将input改为泛型函数
function input<T extends TInputType>(props: TProps<T>) {
  console.log(props);
}

const val = 1234;

input({ 
  type: 'number', 
  value: val, 
  handler: (e, { value }) => {
    // 此时e会被推断为Event，value为number
    console.log(e, value);
  } 
});

修改后，当传入type: 'number'时，TypeScript会自动推断泛型T为'number'，进而确定handler的类型是THandler<number>，参数e和value就能获得正确的类型提示，不会再出现any的推断问题。

扩展：支持date类型 #

如果需要为date类型单独定义对应类型，可以扩展TProps的条件分支：

type TProps<T extends TInputType = TInputType> = {
  type: T;
} & (
  T extends 'number' ? {
    value: number;
    handler: THandler<number>;
  } : T extends 'date' ? {
    value: Date;
    handler: THandler<Date>;
  } : {
    value: string;
    handler: THandler<string>;
  }
);

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