Typescript - Typing a function with optional argument correctly

Question

Suppose we have the following function:

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];
}

If then I use it without the mapper argument, the type of the return value is not deduced properly:

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

But if I provide an identity function as the third parameter, it is deduced correctly:

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

How should the test function be typed so when we don't provide the mapper argument, the return value's type is deduced correctly?

Playground link

Matthieu Riegler · Accepted Answer · 2022-07-10 10:49:27Z

3

Just use 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

edited Jul 10, 2022 at 10:49

answered Jul 10, 2022 at 10:44

Matthieu Riegler

60k27 gold badges159 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T.J. Crowder Over a year ago

@DMZ - Expanding on Matthieu's answer: The issue with your original code is that without a mapper function, there's no way for TypeScript to infer T, because the only place T exists in the parameter list is in relation to mapper. So T is unknown, so the result of test is unknown. The function overload solution avoids that by defining an overload without mapper that returns S[keyof S] and an overload with mapper that returns T.

DMZ Over a year ago

I was so close. Thanks, don't know how did I miss that.

tokland · Accepted Answer · 2022-07-10 12:22:04Z

1

The usual approach is to help the compiler by moving more information to the generic variables of the function. Does this work for you? (Playground)

function test<
    Obj,
    Prop extends keyof Obj,
    Mapper extends ((value: Obj[Prop]) => any) | undefined
>(
    obj: Obj,
    prop: Prop,
    mapper?: Mapper
): undefined extends Mapper ? Obj[Prop] : ReturnType<NonNullable<Mapper>> {
    return mapper ? mapper(obj[prop]) : obj[prop];
}

const value1 = test({ a: "123" }, "a");

const value2 = test({ a: "123" }, "a", x => parseInt(x));

The optional mapper makes the code harder to write, but I am pretty sure this code can be simplified further.

edited Jul 10, 2022 at 12:22

answered Jul 10, 2022 at 11:22

tokland

68.2k13 gold badges151 silver badges174 bronze badges

2 Comments

DMZ Over a year ago

Interesting approach, this works as well. The "undefined extends Mapper" is kind of confusing though.

tokland Over a year ago

You can also write the more natural [Mapper] extends [Function] ? ReturnType<Mapper> : Obj[Prop], but the non-distributive extends may be also confusing for TS newcomers.

Collectives™ on Stack Overflow

Typescript - Typing a function with optional argument correctly

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related