为何TypeScript合并对象时需用'as const'做类型推断？

先看第一个能正常运行的例子：

type ImageFormat = {
  type: 'image/avif' | 'image/jpeg' | 'image/png' | 'image/svg+xml' | 'image/webp';
};

const sampleFunction = (): { format: ImageFormat } => {
  const format: ImageFormat = {
    type: 'image/png',
  };

  return {
    format,
  };
};

这里你给format变量显式标注了ImageFormat类型，TypeScript会直接校验右侧的对象字面量是否符合该类型——'image/png'属于ImageFormat['type']的联合成员，完全匹配，所以没有问题。

再看第二个报错的场景：

type ImageFormat = {
  type: 'image/avif' | 'image/jpeg' | 'image/png' | 'image/svg+xml' | 'image/webp';
};

const sampleFunction = (): { format: ImageFormat } => {
  const typedFormat: ImageFormat = {
    type: 'image/png',
  };

  const format = {
    ...typedFormat,
    type: 'image/png', // 不加as const会报错
  };

  return {
    format,
  };
};

核心原因是TypeScript的类型拓宽规则：当你直接写{ type: 'image/png' }但没有显式标注类型、也没加as const时，TypeScript会默认把'image/png'这个字符串字面量拓宽为string类型——它默认认为这个属性的值后续可能被修改成其他字符串，所以不会保留具体的字面量类型。

合并后的format对象，type属性的类型就变成了string，但ImageFormat要求type必须是指定的几个字面量之一，string类型无法匹配这个联合字面量类型，因此抛出类型不兼容的错误。

加上as const后，相当于告诉TypeScript：这个值是只读的字面量，不会被修改，所以TypeScript会保留它的具体字面量类型'image/png'，这个类型属于ImageFormat['type']的联合成员，自然就能匹配要求的类型了。

补充：你也可以通过给format变量显式标注ImageFormat类型解决问题，比如：

const format: ImageFormat = {
  ...typedFormat,
  type: 'image/png',
};

这样TypeScript同样会校验右侧对象是否符合ImageFormat类型，也能避免报错，不一定非要用as const。

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