TypeScript中Record<HeaderName,string>|{}类型索引赋值报错求助

你遇到的问题本质是TypeScript对联合类型的索引检查规则导致的：{} | Record<HeaderName, string>这个联合类型中，空对象类型{}并不支持用HeaderName枚举值作为索引（它没有这些键），TypeScript无法确定当前headerMap到底是哪一种类型，所以抛出索引类型错误。而Vue模板因为类型检查逻辑更宽松，所以没有触发这个报错。

针对这个场景，推荐以下几种正确的赋值方式：

1. 替换类型为Partial<Record<HeaderName, string>>（最推荐） #

把headerMap的类型改成Partial<Record<HeaderName, string>>，它表示所有HeaderName对应的键都是可选的，完美匹配“初始为空对象，逐步添加键值”的场景，无需额外处理就能正常赋值：

type HeaderName = 'name' | 'medicaid_id';

class YourClass {
  headerMap: Partial<Record<HeaderName, string>> = {};

  setHeader(key: HeaderName, value: string) {
    this.headerMap[key] = value; // 无类型错误
  }
}

2. 对联合类型做类型断言 #

如果必须保留原有的联合类型，可以通过类型断言明确告诉TypeScript当前headerMap是Record<HeaderName, string>类型：

class YourClass {
  headerMap: Record<HeaderName, string> | {} = {};

  setHeader(key: HeaderName, value: string) {
    // 类型断言后赋值
    (this.headerMap as Record<HeaderName, string>)[key] = value;
  }
}

不过这种方式需要你自己确保逻辑的正确性，避免在headerMap确实是空对象时执行赋值引发潜在问题。

额外说明 #

Vue模板中不报错是因为模板的类型检查机制和TS类文件不同，它对这类索引操作的限制更宽松，但在TS类文件中，TypeScript会严格遵循联合类型的索引规则，所以必须通过上述方式修正类型定义或做类型处理。

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