如何使用 TypeScript 从接口动态推导类型？

Question

TypeScript Docs描述了如何使用函数重载。

以下用例是静态定义的重载函数的示例。

interface MyObject {
    a: boolean
    b: number
}

const myObject: MyObject = {
    a: true,
    b: 1
}

function getValueOfMyObject (key: 'a'): boolean
function getValueOfMyObject (key: 'b'): number
function getValueOfMyObject (key: keyof MyObject): boolean | number {
    return myObject[key]
}

所以，

getValueOfMyObject('a')将有一个boolean作为返回类型，并且

getValueOfMyObject('b')将有一个numberas 返回类型。

对于我的用例，我不想为 MyObject 接口中的每个新属性输入更多的重载。我正在寻找具有动态返回类型的解决方案。TypeScript 根据 MyObject 接口自动推导返回类型的一种方式。就像是：

function getValueOfMyObject (key: keyof MyObject): typeof MyObject[key] {
    return myObject[key]
}

然而，这似乎不是正确的语法。有没有办法用 TypeScript 实现这一点？

Answer 1

您只需要一个类型参数来捕获调用函数的实际文字类型。有了这个类型参数，我们就可以索引到 teMyObject类型。

interface MyObject {
    a: boolean
    b: number
}

const myObject: MyObject = {
    a: true,
    b: 1
}
function getValueOfMyObject<K extends keyof MyObject>(key: K): MyObject[K] {
    return myObject[key]
}
getValueOfMyObject('a') // K is 'a', returns boolean
getValueOfMyObject('b') // K is 'b', returns number