useMemo 返回类型错误，但是 tsc 不会显示错误？答案

【问题标题】：useMemo return type is wrong, but tsc will not show error?useMemo 返回类型错误，但是 tsc 不会显示错误？
【发布时间】：2021-03-25 05:40:56
【问题描述】：

const labelTypeMap = useMemo<Record<'between' | 'inner', string>>(
  () => ({
    between: formatMessage({ id: 'addGroup' }),
    inner: '+',
    aaa: 123, // no error here
  }),
  []
);

作为代码，aaa 没有错误，即使它与 useMemo 的返回类型不匹配。任何帮助将不胜感激。

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案1】：

这里有一个简化的版本，仍然可以证明这个问题：

const labelTypeMap: Record<"between" | "inner", string> = (() => ({
    between: "xxx",
    inner: "+",
    aaa: 123,
}))();

问题在于 Typescript 通常允许对象具有额外的属性。毕竟，具有额外属性的对象与基本类型兼容（在面向对象的意义上）。只有当您使用动态自省功能（如 Object.keys 和类似功能）时才会出现惊喜。

这种灵活性的唯一例外是当您尝试直接分配对象字面量时：

const labelTypeMap: Record<"between" | "inner", string> = {
    between: "xxx",
    inner: "+",
    aaa: 123, // Error as expected
};

现在它会按预期抱怨。

因此，解决您的问题的一种可能方法是：

const labelTypeMap = useMemo(() => {
    const result: Record<"between" | "inner", string> = {
        between: "xxx",
        inner: "+",
        aaa: 123, // Error as expected
    };

    return result;
}, []);

这也有效：

const labelTypeMap = useMemo(
    (): Record<"between" | "inner", string> => ({
        between: "xxx",
        inner: "+",
        aaa: 123, // Error as expected
    }),
    [],
);

【讨论】：

非常感谢，这确实是我要找的！
@takeItIzzy 请不要忘记接受答案