TypeScript中含字符串索引对象与其他属性的类型定义报错问题

原始对象 #

let Obj = {
  ['0']: {
    mode: 'x'
  },
  getMode: () => 'x'
}

错误的类型定义 #

type Obj = {
  [id: string]: {
    mode: string
  };
  getMode: () => string
}

报错信息 #

类型为'() => string'的属性'getMode'无法赋值给字符串索引类型'{ mode: string}'。ts(2411)

问题原因 #

字符串索引签名[id: string]: { mode: string }会强制对象的所有属性类型必须匹配该索引签名的类型。但getMode是返回字符串的函数，和{ mode: string }类型不兼容，因此触发类型检查错误。

解决方案 #

方案1：使用联合类型扩展索引签名

让索引签名包含所有可能的属性类型，这样getMode的函数类型就符合要求了：

type Obj = {
  [id: string]: { mode: string } | (() => string);
  getMode: () => string;
}

方案2：使用交叉类型分离约束

把索引签名部分和固定属性部分拆成两个类型，再用交叉类型合并：

type IndexedPart = {
  [id: string]: { mode: string };
}

type Obj = IndexedPart & {
  getMode: () => string;
}

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