TypeScript接口添加id属性出现赋值错误的原因咨询

先看你写的TypeScript代码：

interface IErrorContainer {
  id: number;
  [prop: string] : string; 
}

const errorBag1: IErrorContainer = {
  id: 1,
  email: "Not valid email",
  userName: "length must be upper then 8" 
}

报错的核心原因是索引签名的约束和显式定义的id属性类型冲突：

• 接口里的[prop: string]: string是字符串索引签名，它规定：这个接口的所有属性（不管是显式定义还是后续添加的），只要是通过字符串类型的键访问的，值的类型必须是string。
• 在JavaScript/TypeScript中，对象的属性名本质上都会被转为字符串（比如id作为键实际是字符串"id"），所以id属性也得遵守索引签名的类型要求——必须是string类型，但你给的id是number类型，这就触发了类型检查错误。

解决办法 #

如果确实需要保留id的number类型，可以把索引签名的类型改成string | number，让它兼容两种类型：

interface IErrorContainer {
  id: number;
  [prop: string] : string | number; 
}

或者把id的类型改成string，和索引签名保持一致：

interface IErrorContainer {
  id: string;
  [prop: string] : string; 
}

const errorBag1: IErrorContainer = {
  id: "1",
  email: "Not valid email",
  userName: "length must be upper then 8" 
}

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