如何在TypeScript中遍历对象并正确推断值类型？

我有一个定义UI变更的接口：

interface UIChangesDictionary {
    christmasTreeCount: number;
    greeting: string;
    isDarkMode: boolean;
}

使用静态对象作为示例数据：

const changes: UIChangesDictionary = {
    christmasTreeCount: 14,
    greeting: "Ho ho ho",
    isDarkMode: true,
};

现在需要遍历这个对象的键值对来应用UI修改：

Object.entries(changes).forEach(
    ([ property, value ]) => {
        switch (property) {
            case "christmasTreeCount":
                // 期望value是number类型，但实际是any
                break;
            case "greeting":
                // 期望value是string类型，但实际是any
                break;
            case "isDarkMode":
                // 期望value是boolean类型，但实际是any
                break;
        }
    }
);

问题在于Object.entries()返回的value类型是any，无法自动推断出接口中定义的对应类型，该如何解决？

方法1：分支内使用类型断言 #

在每个switch分支里，直接给value添加类型断言，明确指定对应类型：

Object.entries(changes).forEach(
    ([ property, value ]) => {
        switch (property) {
            case "christmasTreeCount":
                const treeCount = value as number;
                // treeCount会被正确推断为number类型
                break;
            case "greeting":
                const greetText = value as string;
                // greetText为string类型
                break;
            case "isDarkMode":
                const darkModeEnabled = value as boolean;
                // darkModeEnabled为boolean类型
                break;
        }
    }
);

方法2：实现类型安全的entries函数 #

TypeScript原生Object.entries()无法精确推断联合类型，我们可以自定义一个类型安全的版本：

type Entries<T> = {
    [K in keyof T]: [K, T[K]];
}[keyof T][];

function typedEntries<T>(obj: T): Entries<T> {
    return Object.entries(obj) as Entries<T>;
}

之后用这个函数替代原生Object.entries()，value会自动匹配对应类型：

typedEntries(changes).forEach(
    ([ property, value ]) => {
        switch (property) {
            case "christmasTreeCount":
                // value自动推断为number
                break;
            case "greeting":
                // value自动推断为string
                break;
            case "isDarkMode":
                // value自动推断为boolean
                break;
        }
    }
);

方法3：遍历接口键名联合类型 #

将Object.keys()的结果断言为接口键名数组，再通过索引访问获取对应值的类型：

(Object.keys(changes) as Array<keyof UIChangesDictionary>).forEach(key => {
    const value = changes[key];
    switch (key) {
        case "christmasTreeCount":
            // value为number类型
            break;
        case "greeting":
            // value为string类型
            break;
        case "isDarkMode":
            // value为boolean类型
            break;
    }
});

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