TypeScript数组传参时如何用keyof推断实体字段类型？

你可以通过调整Options接口的定义，让colDefs成为由Entity各键对应的ColDef联合类型组成的数组，这样TypeScript就能根据每个元素的field值自动推断valueGetter的参数类型。

修改后的代码如下：

interface ColDef<Entity, Field extends keyof Entity> {
    field: Field;
    valueGetter(value: Entity[Field], entity: Entity): any
}

interface Options<Entity> {
    // 生成由Entity每个键对应的ColDef组成的联合类型数组
    colDefs: Array<{ [K in keyof Entity]: ColDef<Entity, K> }[keyof Entity]>
}

const options: Options<{ name: string; age: number }> = {
    colDefs: [
        {
            field: 'name',
            valueGetter(value) {
                // value类型自动推断为string
                console.log(value.toUpperCase());
            }
        },
        {
            field: 'age',
            valueGetter(value) {
                // value类型自动推断为number
                console.log(value.toFixed(0));
            }
        }
    ]
}

原理说明 #

• { [K in keyof Entity]: ColDef<Entity, K> } 会为Entity的每个键K生成对应的ColDef<Entity, K>类型，比如对于{name: string, age: number}，这个映射类型会生成{name: ColDef<..., 'name'>, age: ColDef<..., 'age'>}。
• [keyof Entity] 会把这个映射类型的值提取出来，形成联合类型ColDef<..., 'name'> | ColDef<..., 'age'>。
• 最后用Array<>包裹这个联合类型，这样colDefs数组的每个元素都可以是对应某个具体键的ColDef，TypeScript就能根据field的具体值自动推断valueGetter的参数类型。

如果你偏好更简洁的写法，也可以借助辅助函数让TypeScript自动完成类型推断：

interface ColDef<Entity, Field extends keyof Entity> {
    field: Field;
    valueGetter(value: Entity[Field], entity: Entity): any
}

interface Options<Entity> {
    colDefs: ColDef<Entity, keyof Entity>[]
}

// 辅助函数触发类型推断
function createOptions<Entity>(options: Options<Entity>) {
    return options;
}

// 无需手动指定泛型，TypeScript会自动推断Entity类型
const options = createOptions({
    colDefs: [
        {
            field: 'name',
            valueGetter(value) {
                // value类型自动推断为string
            }
        }
    ]
});

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