如何为handleAddFilter函数根据mode类型设置value的条件类型？

要让mode和value的类型形成绑定关系——不同mode对应不同的value类型，有两种常用的实现方式：

方法一：函数重载 #

通过定义多个重载签名，明确指定每种mode对应的value类型，再编写通用的实现逻辑：

// 定义重载签名，分别对应不同mode的参数类型
function handleAddFilter(mode: 'Origin', value: string): void;
function handleAddFilter(mode: 'Destination', value: string): void;
function handleAddFilter(mode: 'PaymentType', value: 'Payment in' | 'Payment out'): void;

// 实现签名，涵盖所有可能的参数组合
function handleAddFilter(
  mode: 'PaymentType' | 'Origin' | 'Destination',
  value: string | 'Payment in' | 'Payment out'
) {
  // 这里写你的函数逻辑
}

调用时TypeScript会自动根据传入的mode校验value的类型，比如传入'PaymentType'时，value只能是'Payment in'或'Payment out'。

方法二：联合类型参数元组 #

把mode和value打包成关联的联合类型元组，直接约束参数的合法组合：

function handleAddFilter(
  ...args: 
    | ['Origin', string]
    | ['Destination', string]
    | ['PaymentType', 'Payment in' | 'Payment out']
) {
  const [mode, value] = args;
  // 这里写你的函数逻辑
}

这种方式更简洁，参数组合是强绑定的，不会出现mode和value类型不匹配的情况。

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