TypeScript中如何将第二个泛型参数设置为可选参数

修改后的实现代码 #

class UserModel{
    name!:{
      firstName:string;
      secondName:string;
    }
    job!:string
}

interface Column<T ,U extends keyof T> {
    accessor: U;
    render: (value: T[U]) => void;
}

// 调整泛型声明，仅保留T作为显式传入的泛型参数
function makeColumn<T>(column: { [U in keyof T]: Column<T, U> }[keyof T]) {
    return column;
}

// 调用示例：仅传入UserModel泛型参数，accessor自动约束，render参数类型自动推导
makeColumn<UserModel>({
    accessor: 'name',
    render: (value) => {
        console.log(value.firstName); // value类型自动识别为{ firstName: string; secondName: string }
    }
})

makeColumn<UserModel>({
    accessor: 'job',
    render: (value) => {
        console.log(value.toUpperCase()); // value类型自动识别为string
    }
})

核心调整说明 #

原代码的问题在于：当手动指定makeColumn<UserModel>时，第二个泛型参数U无法自动推导——TypeScript在手动指定部分泛型参数时，会关闭剩余参数的自动推导逻辑。

修改后的方案通过映射类型生成联合类型实现自动推导：

1. 函数仅声明T作为显式泛型参数，由调用时手动传入；
2. 参数类型{ [U in keyof T]: Column<T, U> }[keyof T]会生成Column<UserModel, 'name'> | Column<UserModel, 'job'>这样的联合类型；
3. 当传入具体的accessor值时，TypeScript会自动匹配对应的联合分支，从而推导render参数的准确类型。

替代方案（TS4.7+可用） #

如果你使用TypeScript 4.7及以上版本，也可以用部分泛型推导语法，通过下划线占位跳过不需要手动传入的泛型参数：

function makeColumn<T, U extends keyof T>(column: Column<T, U>) {
    return column;
}

// 用_占位U，让TypeScript自动推导
makeColumn<UserModel, _>({
    accessor: 'name',
    render: (value) => {
        console.log(value.firstName);
    }
})

这种写法更贴近原函数结构，但需要依赖TS4.7+的特性。

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