TypeScript报错：`${any}`类型表达式无法索引类型，元素隐式为any类型

报错原因 #

触发该报错的核心问题有两个：

• 作为索引传入的name被标注为宽泛的string类型，TS无法确认该动态字符串一定属于dialogFuncMap的合法键范围，当开启noImplicitAny配置时就会抛出类型错误
• onHide方法中写的`${name}:any`是完全错误的写法：模板字符串内的:any不会被识别为类型标注，只会被当作普通字符串拼接，最终生成类似xxx:any的无效键，既不符合业务逻辑，也会进一步干扰TS的类型推导

修复步骤 #

方案1（推荐，类型安全性最高） #

提前枚举dialogFuncMap的所有合法键，收紧入参类型，从根源避免非法索引：

1. 先定义弹窗名称的联合类型，再明确标注dialogFuncMap的类型

// 枚举所有合法的弹窗标识
type DialogKey = 'create' | 'edit' | 'view' | 'delete';

// 明确声明对象的键值类型：键为DialogKey，值为控制弹窗显隐的函数
const dialogFuncMap: Record<DialogKey, (visible: boolean) => void> = {
  create: (visible) => { /* 新建弹窗显隐逻辑 */ },
  edit: (visible) => { /* 编辑弹窗显隐逻辑 */ },
  view: (visible) => { /* 详情弹窗显隐逻辑 */ },
  delete: (visible) => { /* 删除弹窗显隐逻辑 */ },
};

2. 修正两个事件方法的代码，删除无效的模板字符串包裹和错误的:any拼接，将入参类型收紧为之前定义的DialogKey

const onClick = (name: DialogKey) => {
  // 直接用name作为索引即可，不需要额外套模板字符串
  dialogFuncMap[name](true);
};

const onHide = (name: DialogKey) => {
  dialogFuncMap[name](false);
};

这种写法下TS会自动校验传入的name是否为合法值，从编译阶段就避免传入不存在的弹窗标识导致的运行时错误。

方案2（适配动态键场景，类型安全性稍弱） #

如果弹窗标识是完全动态的、无法提前枚举所有值，可以给dialogFuncMap添加字符串索引签名，允许任意string类型的键访问：

// 添加string类型索引签名
const dialogFuncMap: Record<string, (visible: boolean) => void> = {
  // 原有弹窗方法定义
};

// 入参可以保留string类型，不需要额外修改
const onClick = (name: string) => {
  dialogFuncMap[name](true);
};

const onHide = (name: string) => {
  // 务必删掉错误的`:any`拼接
  dialogFuncMap[name](false);
};

注意：该方案下TS不会校验传入的name是否真的对应dialogFuncMap里的方法，如果传入了不存在的键，会在运行时抛出is not a function的错误，使用时需要自行保证键的合法性。

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