Typescript 如何获得泛型可选函数参数的正确类型推断

发布于03月14日

function combine<F extends Record<string, string>, B extends Record<string, string>>(foo: F, bar?: B) {
    const retVal = {
        ...foo,
        ...bar
    }

    return retVal
}

const test = combine({
    one: 'One',
}, {
    two: 'Two',
})

function testKey<T extends Record<string, string>>(foo: T, bar: keyof T) { }
testKey(test, 'one')   // Valid
testKey(test, 'two')   // Valid
testKey(test, 'three') // Shouldn't be valid

第19行应该是无效的，但它是有效的.如果我将鼠标悬停在retVal上方，则推断的类型如下:

const retVal: F & {
    [x: string]: string;
}

但我不确定为什么会有这样的推断.这是一种过于宽容的做法.如果我将其更改为bar不是可选的，则推断retVal的类型如下:

const retVal: F & B

这是我想要的类型推断，但当bar是可选的时候，我想不出一种方法来获得它.

推荐答案

您可以使用function overloads来帮助编译器:

function combine<F extends Record<string, string>>(foo: F): F;
function combine<F extends Record<string, string>, B extends Record<string, string>>(foo: F, bar: B): F & B;
function combine<F extends Record<string, string>, B extends Record<string, string>>(foo: F, bar?: B) {
    const retVal = {
        ...foo,
        ...bar
    };

    return retVal;
}

const test = combine({
    one: 'One',
}, {
    two: 'Two',
})

function testKey<T extends Record<string, string>>(foo: T, bar: keyof T) { }
testKey(test, 'one')   // Valid
testKey(test, 'two')   // Valid
testKey(test, 'three') // Not valid

^{Playground link}