TypeScript泛型函数多参数不兼容及智能提示异常求助

问题描述 #

你编写的theFunction函数在接收单个TheInterface实例时正常工作，但传入多个不同实例时会报错，且返回函数的智能提示仅识别首个参数的键。原代码如下：

interface TheInterface<T extends string> {
    theRecord: Record<T, unknown>
}

const theFunction = <T extends string>(...arrayOfInterfaceType:TheInterface<T>[]) => {
return (key: keyof typeof arrayOfInterfaceType[number]['theRecord']) => key
}

const values1 = {theRecord:{value1: ""}}
const values2 = {theRecord:{value2: ""}}

const values1TheInterface: TheInterface<keyof typeof values1.theRecord> = values1
const values2TheInterface: TheInterface<keyof typeof values2.theRecord> = values2

// 可正常运行
const functionWithOneInterface = theFunction(values1TheInterface)
// 键的智能提示正常
functionWithOneInterface("value1")
// 无法运行
const functionWithTwoInterfaces = theFunction(values1TheInterface, values2TheInterface)
// 智能提示仅识别value1
functionWithTwoInterfaces("value1", "value2")

问题根源在于原函数的泛型T被约束为单一字符串类型，无法兼容多个不同T的TheInterface实例，导致类型冲突；同时返回函数的参数类型无法正确合并所有实例的键。

解决方案 #

修改函数的泛型定义，使其支持接收一组不同类型参数的TheInterface实例，并自动合并所有实例的键类型：

interface TheInterface<T extends string> {
    theRecord: Record<T, unknown>
}

// 泛型改为接收字符串类型数组，映射每个参数对应的TheInterface类型
const theFunction = <T extends string[]>(...arrayOfInterfaceType: { [K in keyof T]: TheInterface<T[K]> }) => {
    // 合并所有theRecord的键为联合类型
    type AllKeys = keyof typeof arrayOfInterfaceType[number]['theRecord']
    return (key: AllKeys) => key
}

const values1 = {theRecord:{value1: ""}}
const values2 = {theRecord:{value2: ""}}

const values1TheInterface: TheInterface<keyof typeof values1.theRecord> = values1
const values2TheInterface: TheInterface<keyof typeof values2.theRecord> = values2

// 正常运行
const functionWithOneInterface = theFunction(values1TheInterface)
functionWithOneInterface("value1")

// 现在可正常接收多个参数
const functionWithTwoInterfaces = theFunction(values1TheInterface, values2TheInterface)
// 智能提示能识别value1和value2
functionWithTwoInterfaces("value1")
functionWithTwoInterfaces("value2")

关键修改说明 #

• 将泛型T从单一字符串改为字符串数组T extends string[]，每个数组元素对应一个传入参数的TheInterface泛型类型
• 使用映射类型{ [K in keyof T]: TheInterface<T[K]> }确保每个传入参数的类型与对应泛型匹配，解决多参数类型冲突问题
• 通过keyof typeof arrayOfInterfaceType[number]['theRecord']自动提取并合并所有实例的theRecord键，实现完整的智能提示

内容的提问来源于stack exchange，提问作者North