TypeScript新增对象属性后动态属性类型推断失效问题

单顶层属性时类型推断正常，本质是keyof typeof Actions此时是单一字面量类型，不存在类型分发问题。当存在多个顶层属性时，Param类型是所有键的联合类型，fn函数内部没有对入参做泛型窄化，TypeScript 无法将联合类型的入参和mapper的泛型参数K做精准绑定，只能将返回值推断为所有属性值的联合类型。

给fn函数增加泛型约束，在函数调用时将入参窄化为具体的键字面量类型，即可触发正确的类型推断。

修复后完整代码：

const Actions = {
    globalUI: {
        openModal: 'openModal'
    },
    LP: {
        addDirectory: 'addDirectory'
    }
}

type Mapper = <T, K extends keyof T>(action: T, key: K) => T[K];
const mapper: Mapper = (action, name) => {
    return action[name]
}

// 定义Actions的类型，给fn增加泛型K，约束为Actions的合法键
type ActionsType = typeof Actions;
const fn = <K extends keyof ActionsType>(param: K) => {
    const action = mapper(Actions, param);
    return action
}

// 调用时类型会被精准推断
const globalUIAction = fn('globalUI'); // 类型：{ openModal: string }
const lpAction = fn('LP'); // 类型：{ addDirectory: string }

可选优化 #

如果需要让属性值的类型也收窄为字面量而非宽泛的string，可以给Actions添加as const断言：

const Actions = {
    globalUI: {
        openModal: 'openModal'
    },
    LP: {
        addDirectory: 'addDirectory'
    }
} as const;

添加后fn('globalUI')返回的类型中，openModal的类型会被推断为字面量'openModal'，更适合常量 action 映射的使用场景。

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