使用字符串访问对象触发TypeScript错误：索引类型不匹配

错误原因 #

TypeScript报错核心原因有两点：

• item.field被定义为任意string，TypeScript无法确认该字符串是ChatWidgetSettings的合法属性名
• 即便属性名合法，也不是所有属性都能接受File类型的值，类型检查不通过

解决方案 #

通过严格约束字段类型，只允许传入ChatWidgetSettings中可赋值为File的属性名，既保证类型安全，又消除错误：

1. 先定义一个筛选类型，提取ChatWidgetSettings中类型为File | null的属性名：

// 在组件文件的import语句后添加
type FileField = {
  [K in keyof ChatWidgetSettings]: ChatWidgetSettings[K] extends File | null ? K : never;
}[keyof ChatWidgetSettings];

2. 修改uploadFile函数的参数类型，同时修复原代码中file未定义的错误（应改为item.file）：

uploadFile(item: {
  field: FileField;
  file: File;
}) {
  this.settings[item.field] = item.file;
}

原理说明 #

• FileField类型会自动筛选出ChatWidgetSettings中所有可存储File或null的属性（比如launcherImage、profileClientAvatar等）
• 此时TypeScript能明确item.field是合法属性名，且对应属性可接受File类型，直接消除类型错误

备选方案（不推荐） #

如果需要极端灵活的场景，可给ChatWidgetSettings添加索引签名，但会削弱TypeScript的类型安全优势：

// 修改models/chat-widget-settings.ts中的接口
export interface ChatWidgetSettings {
  // 原有属性...
  [key: string]: any;
}

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