typescript - 如何将 Typescript 函数重载与具有多个参数的函数一起使用？

Question

我有一个函数试图在数字数组中找到一个值。该值可以是对象或数字。如果该值是一个对象，则有一个“键”属性用于从该对象获取数字值。

我正在尝试使用 Function Overloading 来拥有一个可以处理这两种情况的函数。

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
    })
}

这会产生错误 Type undefined cannot be used as an index type

但是在这个分支中，v的值是一个对象，怎么没有定义key呢？

TS-Playground

谢谢

编辑

Alex Wayne 提出了一个解决方案，但它没有正确地将值缩小为数字。

如果我们不调用 list.find，而是调用一个只接受数字的自定义函数， typescript 会抛出错误

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

Answer 1

实现函数不知道它的重载是什么。这意味着如果重载函数签名被删除，重载函数实现必须仍然完全有效。

因此，虽然如果 typeof v === 'number' then typeof key === 'string' 是真的，但编译器并不知道这一点。

如果你纯粹看这个函数签名:

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

然后您会看到 find({ someKey: 1 }, [1,2,3]) 是一个有效的调用。重载会阻止该调用，但此函数必须在没有这些重载的情况下有效。

---

这意味着要解决此问题，您必须在使用之前测试 key 是否存在。

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

但是，这带来了一个新问题:

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

我认为这是因为 typeof v === 'number' 不够细化。我不确定它到底认为它可能是什么，但如果你反转三元并通过 typeof v === 'object' 进行优化，typescript 会很高兴。

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

Playground

---

最后，您可以通过使用 key: keyof T 来提高类型安全性。

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