How to use Typescript Function Overloading with a function that has multiple parameters?

Question

I've a function that tries to find a value in an array of numbers. The value can be either an object or a number. If the value is an object, there's a 'key' property that is used to get the number value from the object.

I'm trying to use Function Overloading to have a single function that can handle both cases.

type ObjectType = {
    [key: string]: number
}

type FunctionType = {
    <T extends ObjectType>(v: T, list: number[], key: string): T | undefined
    (v: number, list: number[]): number | undefined
}

const find: FunctionType = <T extends ObjectType | number,>(v: T, list: number[], key?: string)=>{

    const value = typeof v === 'number' ? v : v[key]

    return list.find((item)=>{
        return item === value
    })
}

This creates an error Type undefined cannot be used as an index type

But in this branch, the value of v is an object, so how is key not defined?

TS-Playground

Thank you

Edit

A solution was proposed by Alex Wayne, but it doesn't properly narrow value to a number.

If instead of calling list.find, we called a custom function that only accepts numbers, typescript would throw an error


const findNumber = (v: number, list: number[])=>{
    /* Do stuff with v as a number */
    return list.indexOf(v)
}

const find: FunctionType = <T extends ObjectType | number>(v: T, list: number[], key?: keyof T)=>{
    const value = (key && typeof v === 'object') ? v[key] : v

    return list[findNumber(value, list)]
}

Type 'ObjectType' is not assignable to type 'number'

TS-Playground

Alex Wayne · Accepted Answer · 2021-07-23 18:28:58Z

1

The implementation function has no idea what its overloads are. This means that an overload function implementation must still be completely valid if the overload function signatures are removed.

So while it is true that if typeof v === 'number' then typeof key === 'string' the compiler doesn't know that.

If you look purely at this function signature:

<T extends ObjectType | number,>(v: T, list: number[], key?: string)=>{

Then you see that find({ someKey: 1 }, [1,2,3]) is a valid invocation. The overloads prevent that invocation, but again this function must be valid without those overloads.

Which means to fix this you'll have to test for the presence of key before you use it.

const value = (key && typeof v === 'number') ? v : v[key]

However, this gives a new problem:

Type 'undefined' cannot be used as an index type.(2538)

I believe this is because typeof v === 'number' is not a sufficient refinement. I'm not sure exactly what else it thinks it could be, but if you invert the ternary and instead refine by typeof v === 'object' typescript is happy.

const value = (key && typeof v === 'object') ? v[key] : v

Playground

Lastly, you can probably improve type safety here by using key: keyof T instead.

const find: FunctionType = <T extends ObjectType | number>(v: T, list: number[], key?: keyof T)=>{
    const value = (key && typeof v === 'object') ? v[key] : v

    return list.find((item)=>{
        return item === value
    })
}

See playground

answered Jul 23, 2021 at 18:28

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

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

1 Comment

Simon Tran Over a year ago

Thanks, this helped me understand. However, your solutions is problematic if v is an object, but key is undefined. If instead of calling list.find, we passed value to a custom function that only accepts numbers, typescript would throw an error that T cannot be assigned to number

captain-yossarian from Ukraine · Accepted Answer · 2021-07-23 18:36:31Z

0

First of all, let's make sure that invalid state is unrepresentable. Let's define union types:

type IsObj<T> = {
    value: T, key: keyof T
}

type IsNumber = { value: number }

type Params<T> = IsObj<T> | IsNumber

As you might have noticed, I have binded 2nd and 3rd arguments.

Now, we can define our custom typeguard:

const isNumber = <T,>(params: Params<T>): params is IsNumber => typeof params.value === 'number'

Let's put it all together:


type ObjectType = {
    [key: string]: number
}

type IsObj<T> = {
    value: T, key: keyof T
}

type IsNumber = { value: number }

type Params<T> = IsObj<T> | IsNumber

const isNumber = <T,>(params: Params<T>): params is IsNumber => typeof params.value === 'number'

type FunctionType = {
    <T extends ObjectType>(list: number[], params: IsObj<T>): T | undefined
    (list: number[], params: IsNumber): number | undefined
}

const find: FunctionType = <T extends ObjectType | number,>(list: number[], params: Params<T>) => {

    const value = isNumber(params) ? params.value : params.value[params.key]

    return list.find((item) => item === value)
}

const result = find([1, 2, 3], { value: 42}) // ok
const result_ = find([1, 2, 3], { value: { age: 2 }, key: 'age' }) // ok

const result__ = find([1, 2, 3], { value: { age: 2 }, key: 'name' }) // expected error
const result___ = find([1, 2, 3], { value: 42, key: 'name' }) // expected error

Playground

answered Jul 23, 2021 at 18:36

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

1 Comment

Simon Tran Over a year ago

If I have an array of number to pass to the function, I don't think it makes sense to map it to isNumber. Feels like it has a performance cost, while only bringing better type checking

Collectives™ on Stack Overflow

How to use Typescript Function Overloading with a function that has multiple parameters?

Edit

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related