TypeScript中用方括号访问对象时索引类型报错如何解决？

TypeScript 自动推导的colors对象类型仅包含red、green两个明确的合法键，而logColor的入参color是宽泛的string类型，无法保证其一定是colors的合法键，因此触发了类型校验报错。

根据你的业务场景，可以选择以下任意一种方案修复：

• 方案1：限定入参为colors的合法键（类型最安全，推荐优先使用）
  直接用keyof typeof colors获取colors的所有合法键作为入参类型，从源头限制入参只能是'red'/'green'，完全符合类型安全要求。

const colors = {
  red: "#8b0000",
  green: "#008b00",
}

const logColor = (color: keyof typeof colors) => {
  console.log(colors[color])
}

• 方案2：给colors添加字符串索引签名
  如果你需要允许colors后续添加任意字符串类型的键，可直接声明colors的类型为键为字符串、值为字符串的索引结构。

const colors: Record<string, string> = {
  red: "#8b0000",
  green: "#008b00",
}

const logColor = (color: string) => {
  console.log(colors[color])
}

• 方案3：使用类型断言临时绕过校验
  如果你能100%确定运行时传入的color一定是colors的合法键，只是不想修改原有入参类型，可以用类型断言告诉TypeScript该操作是合法的，该方案会损失部分类型校验能力，不推荐长期使用。

const colors = {
  red: "#8b0000",
  green: "#008b00",
}

const logColor = (color: string) => {
  console.log(colors[color as keyof typeof colors])
}

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