TypeScript报错：string类型无法用于索引React组件嵌套主题色对象

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type...

错误原因 #

该报错的本质是：你用来索引主题色对象的color、weight变量为宽泛的string类型，而TypeScript要求对象的索引值必须是对象类型定义中明确存在的键，无法保证任意字符串都能匹配到colors下的合法属性，因此抛出了隐式any的错误。

方案1：定义精准的类型约束（最推荐） #

先提前定义好合法的颜色键、色阶的类型，给相关变量加上类型约束，从根源上避免非法值传入：

// 定义合法的色系名称类型
type ColorKey = 'yellow' | 'green' | 'red' | 'cyan' | 'purple' | 'gray'
// 定义合法的色阶类型
type ColorWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
// 嵌套色系的类型定义
type PaletteColor = Record<ColorWeight, string>
// 完整的colors对象类型
type ThemeColors = {
  background: string
  text: string
  black: string
  white: string
} & Record<ColorKey, PaletteColor>

给你用来索引的变量或者入参加上对应类型即可：

// 变量声明时指定类型
const color: ColorKey = 'yellow'
const weight: ColorWeight = 500
// 此时访问完全符合TS类型校验
const targetColor = themes.colors[color][weight]

// 如果是组件入参，直接给props加类型约束即可
interface ButtonProps {
  color: ColorKey
  weight: ColorWeight
}

方案2：类型断言（适合临时快速修复） #

如果只是临时需要绕开检查，且你可以确定传入的color和weight一定是合法值，可以直接用as做类型断言：

const targetColor = themes.colors[color as keyof typeof themes.colors][weight as keyof typeof themes.colors.yellow]

注意：该方式相当于主动放弃TS的类型校验，传入非法值时不会有提前报错，仅推荐确定输入合法的场景使用。

方案3：添加类型守卫（适合输入值不确定的场景） #

如果color和weight是用户输入、接口返回等不可控的值，可以加类型守卫做合法性校验，同时做容错处理：

const VALID_COLORS = ['yellow', 'green', 'red', 'cyan', 'purple', 'gray'] as const
const VALID_WEIGHTS = [100,200,300,400,500,600,700,800,900] as const

type ColorKey = typeof VALID_COLORS[number]
type ColorWeight = typeof VALID_WEIGHTS[number]

function isValidColor(color: unknown): color is ColorKey {
  return typeof color === 'string' && VALID_COLORS.includes(color as ColorKey)
}

function isValidWeight(weight: unknown): weight is ColorWeight {
  const numWeight = Number(weight)
  return VALID_WEIGHTS.includes(numWeight as ColorWeight)
}

// 使用时先做校验
if (isValidColor(color) && isValidWeight(weight)) {
  const targetColor = themes.colors[color][weight]
  // 后续业务逻辑
} else {
  // 非法值兜底逻辑，比如返回默认灰色
  return themes.colors.gray[500]
}

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