Typescript - 正确输入带有可选参数的函数

Question

假设我们有以下函数:

function test<S, T>(obj: S, prop: keyof S, mapper?: (value: S[keyof S]) => T): S[keyof S] | T {
  return typeof mapper === 'function'
    ? mapper(obj[prop])
    : obj[prop];
}

如果我在没有 mapper 参数的情况下使用它，则无法正确推导返回值的类型:

const value = test({ a: 'stringValue' }, 'a'); // value is of type "unknown"

但是如果我提供一个恒等函数作为第三个参数，它就会被正确推导:

const value = test({ a: 'stringValue' }, 'a', x => x); // value is of type "string"

test 函数应该如何输入，以便当我们不提供 mapper 参数时，可以正确推导返回值的类型？

Playground link

Answer 1

只需使用 function overloads !

function test<S, T>(obj: S, prop: keyof S): S[keyof S];
function test<S, T>(obj: S, prop: keyof S, mapper: (value: S[keyof S]) => T): T;
function test<S, T>(obj: S, prop: keyof S, mapper?: (value: S[keyof S]) => T): S[keyof S] | T {
    return typeof mapper === 'function'
        ? mapper(obj[prop])
        : obj[prop];
}

const value = test({ a: 'stringValue' }, 'a'); // string

const value2 = test({ a: 'stringValue' }, 'a', x => x);  // string

Playground