导入const常量时传入参数出现undefined类型错误的问题排查

根本原因 #

你手动给STANDARD_COLORS指定的类型是{ [key: string]: number }，这是索引签名类型，它的含义是「任意字符串键对应的属性值都是number」，但反过来，TypeScript无法确认你访问的具体键（比如newGreen）一定存在于对象中——因为索引签名允许添加任意字符串键，所以TS会认为你访问的属性可能不存在，返回类型是number | undefined，这就导致了和setColor参数类型不兼容的错误。

解决方案 #

方案1：移除手动类型，让TS自动推断 #

直接去掉手动指定的类型，TypeScript会根据对象字面量自动推断出精确的类型，明确每个属性都存在且是number类型：

export const STANDARD_COLORS = {
  notifyBlue: 0x1a72b5,
  deleteRed: 0xde3f51,
  newGreen: 0x12a571,
  updateOrange: 0xffa74e
}

此时TS推断的类型为{ notifyBlue: number; deleteRed: number; newGreen: number; updateOrange: number }，访问任何属性都不会出现undefined的类型提示。

方案2：明确键的联合类型，结合映射类型 #

如果需要保留类型定义（比如要对外暴露键的类型），可以先定义颜色键的联合类型，再用映射类型约束对象：

// 定义所有颜色键的联合类型
type ColorKey = 'notifyBlue' | 'deleteRed' | 'newGreen' | 'updateOrange';

// 用映射类型确保对象包含所有ColorKey的键，且值为number
export const STANDARD_COLORS: { [K in ColorKey]: number } = {
  notifyBlue: 0x1a72b5,
  deleteRed: 0xde3f51,
  newGreen: 0x12a571,
  updateOrange: 0xffa74e
}

这种方式会强制对象必须包含所有指定的键，TS能明确每个属性都存在，消除类型错误。

方案3：使用as const获取更精确的只读类型 #

如果需要让每个颜色值的类型是具体的十六进制数值（而非宽泛的number），同时让对象变为只读，可以用as const断言：

export const STANDARD_COLORS = {
  notifyBlue: 0x1a72b5,
  deleteRed: 0xde3f51,
  newGreen: 0x12a571,
  updateOrange: 0xffa74e
} as const;

此时每个属性的类型是精确的数值（比如0x12a571），对象只读，访问属性时也不会有undefined的问题，类型精度更高。

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