TypeScript条件参数联合类型：如何实现参数类型关联的函数？

嘿，这个需求在TypeScript里其实有成熟的解决方案，我给你分享两种常用的方式，都能完美实现你要的类型约束：

方案一：函数重载 #

函数重载是最直观的方式，通过定义多个精确的函数签名，让TypeScript根据传入的参数自动匹配对应的类型：

// 定义重载签名，明确每个name对应的必填data类型
function myFunc(name: 'one', data: 1): void;
function myFunc(name: 'two', data: 2): void;

// 实现通用函数体，这里的参数类型是所有重载的联合类型
function myFunc(name: 'one' | 'two', data: 1 | 2) {
  // 你的函数逻辑写在这里
}

// 合法调用
myFunc('one', 1);
myFunc('two', 2);

// 以下调用都会触发TypeScript错误：
// myFunc('two'); // 缺少必填的第二个参数
// myFunc('one', 2); // data类型不匹配name='one'的要求
// myFunc('two', 'string'); // data类型错误

这种方式的优势是写法直接，对于固定的少量参数组合非常友好，TypeScript的错误提示也会很清晰。

方案二：泛型结合映射类型 #

如果后续需要扩展更多的name和对应的data类型，用泛型+映射类型会更灵活，扩展性更强：

// 先定义name到data类型的映射关系
type NameDataMap = {
  one: 1;
  two: 2;
  // 以后可以轻松添加更多组合，比如 'three': 3
};

// 使用泛型T约束为映射的键，data类型自动关联对应的映射值
function myFunc<T extends keyof NameDataMap>(name: T, data: NameDataMap[T]): void {
  // 你的函数逻辑写在这里
}

// 合法调用
myFunc('one', 1);
myFunc('two', 2);

// 以下调用同样会触发TypeScript错误：
// myFunc('two'); // 缺少必填参数
// myFunc('one', 2); // 类型不匹配
// myFunc('two', 'string'); // 类型错误

这种方案的好处是，当你需要新增'three'对应3的组合时，只需要修改NameDataMap类型，函数本身不需要改动，非常适合需要扩展的场景。

两种方案都能满足你的需求，你可以根据实际场景选择~

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