Angular中Observable键值对对象转自定义接口数组及类型命名疑问

问题1：如何转换Observable返回值为符合要求的数组 #

你遇到的报错原因是：{[id: number]: string} 是普通对象类型，默认不属于可迭代对象，无法直接用 for...of 语法遍历，额外的JSON序列化/反序列化操作也没有必要，可以直接操作返回的kv对象。
可以通过Object.entries 或 Object.keys 遍历对象的键值对完成转换，修正后的代码如下：

import { map } from 'rxjs';

// 其余代码省略
.keyValue()
  .pipe(
    map((kv: { [id: number]: string }) => {
      // Object.entries将对象转为 [键, 值] 格式的二维数组
      return Object.entries(kv).map(([keyStr, value]) => ({
        id: Number(keyStr), // 把字符串格式的键转为数字类型
        value: value
      } as NumberKeyValue));
    })
  )
  .subscribe((response) => {
    console.log(response);
  });

如果你的运行环境不支持ES2017的Object.entries API，也可以用Object.keys实现：

map((kv: { [id: number]: string }) => {
  return Object.keys(kv).map(keyStr => ({
    id: Number(keyStr),
    value: kv[Number(keyStr)]
  } as NumberKeyValue));
})

转换后的输出结果完全符合你定义的NumberKeyValue接口要求：

[
  {id: 1, value: 'Bad'},
  {id: 2, value: 'Good'},
  {id: 3, value: 'Worst'},
  {id: 4, value: 'Best'},
  {id: 5, value: 'Mean'}
]

问题2：该类型的正式命名 #

{[id: number]: string;} 在TypeScript中的正式名称是 索引签名类型（Index Signature Type），也可简称为索引类型。
这种类型用来描述可以通过索引访问的对象结构：

• 方括号内的id是索引的占位名称，没有实际逻辑意义，可以任意命名
• 方括号后的number是索引的类型，仅支持number或string两种类型
• 右侧的string是该索引对应的值的类型

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