如何让TypeScript识别泛型约束下函数与参数的类型匹配？

你需要创建一个代理函数统一调用其他函数，这些函数共享业务逻辑与清理逻辑。当前代码通过泛型保证了外部调用时的参数类型正确性，但函数内部fn(arg)处TypeScript无法识别泛型已确保参数与函数类型匹配，导致类型错误。

你的代码示例：

function foo(arg: number) {
    // do something with arg
}

function bar(arg: string) {
    // do something with arg
}

const FUNCTIONS = {
    foo,
    bar,
} as const;

type FnType = keyof typeof FUNCTIONS;

type FnArg<Type extends FnType> = Parameters<typeof FUNCTIONS[Type]>[0];

function callFunction<Type extends FnType>(type: Type, arg: FnArg<Type>) {
    // some business logic here that is shared by all functions

    const fn = FUNCTIONS[type];

    // TypeScript无法识别fn和arg的类型关联
    return fn(arg); // 此处出现类型错误
}

// 外部调用类型检查正常
callFunction('foo', 5);
callFunction('foo', 'arg'); // 预期报错

callFunction('bar', 'arg');
callFunction('bar', 5); // 预期报错

可行解决方案 #

方案1：类型断言 #

既然已通过泛型确保外部调用安全，可在内部通过类型断言告知TypeScript调用合法：

function callFunction<Type extends FnType>(type: Type, arg: FnArg<Type>) {
    // 共享业务逻辑

    const fn = FUNCTIONS[type];
    // 断言fn可接受当前arg参数
    return fn(arg as Parameters<typeof fn>[0]);
}

或更精准的断言：

return (fn as (arg: FnArg<Type>) => ReturnType<typeof FUNCTIONS[Type]>)(arg);

方案2：函数重载 #

通过定义重载签名，让TypeScript明确每个函数名对应的参数类型，内部即可正确推断：

// 重载签名：明确每个函数的参数与返回值类型
function callFunction(type: 'foo', arg: number): ReturnType<typeof foo>;
function callFunction(type: 'bar', arg: string): ReturnType<typeof bar>;

// 实现签名
function callFunction(type: FnType, arg: any) {
    // 共享业务逻辑

    const fn = FUNCTIONS[type];
    return fn(arg); // 无类型错误
}

此方法无需断言，但函数数量较多时手动编写重载会繁琐。

方案3：映射类型关联参数与函数 #

创建映射类型绑定函数名与对应参数类型，让函数接受绑定后的条目，TypeScript自动识别类型匹配：

type FunctionMap = typeof FUNCTIONS;
// 生成每个函数对应的[函数名, 参数]条目类型
type CallableEntry = { [K in keyof FunctionMap]: [K, Parameters<FunctionMap[K]>[0]] }[keyof FunctionMap];

function callFunction(...[type, arg]: CallableEntry) {
    // 共享业务逻辑

    const fn = FUNCTIONS[type];
    return fn(arg); // TypeScript正确识别类型匹配
}

此方法扩展性强，新增函数时无需修改函数签名，自动适配新类型。

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