TypeScript中将指定结构数组转换为Map的可行性及实现问询

你的方案逻辑上是可行的，但在TypeScript环境中会遇到类型推断问题导致编译报错，报错信息翻译如下：

类型“(value: { key: string; value: { num: number; letter: string; }; }, index: number, array: { key: string; value: { num: number; letter: string; }; }[]) => (string | { num: number; letter: string; })[]”无法赋值给类型“(value: { key: string; value: { num: number; letter: string; }; }, index: number, array: { key: string; value: { num: number; letter: string; }; }[]) => [string, { num: number; letter: string; }]”

问题根源在于：arr.map(obj => [obj.key, obj.value])的返回值被TypeScript默认推断为(string | { num: number; letter: string })[]（联合类型数组），但Map构造函数需要的是可迭代的元组数组Iterable<[string, { num: number; letter: string }]>，两者类型不匹配。

修正方案 #

你可以通过以下几种方式手动指定类型，让TypeScript正确识别元组结构：

1. 给map回调的返回值添加元组类型断言

const arr = [
  { key: 'user1', value: { num: 0, letter: 'a' } },
  { key: 'user2', value: { num: 0, letter: 'b' } },
  { key: 'user3', value: { num: 0, letter: 'c' } },
];
const b = arr.map(obj => [obj.key, obj.value] as [string, { num: number; letter: string }]);
const map = new Map<string, { num: number; letter: string }>(b);

console.log(map.get('user1')); // 输出 { num: 0, letter: 'a' }

2. 使用as const断言简化代码

const arr = [
  { key: 'user1', value: { num: 0, letter: 'a' } },
  { key: 'user2', value: { num: 0, letter: 'b' } },
  { key: 'user3', value: { num: 0, letter: 'c' } },
];
const map = new Map<string, { num: number; letter: string }>(
  arr.map(obj => [obj.key, obj.value] as const)
);

console.log(map.get('user1'));

3. 提前定义类型别名提升可读性

type UserValue = { num: number; letter: string };
const arr: Array<{ key: string; value: UserValue }> = [
  { key: 'user1', value: { num: 0, letter: 'a' } },
  { key: 'user2', value: { num: 0, letter: 'b' } },
  { key: 'user3', value: { num: 0, letter: 'c' } },
];
const map = new Map<string, UserValue>(arr.map(obj => [obj.key, obj.value] as [string, UserValue]));

修正后代码可以正常编译运行，map.get('user1')会正确返回目标对象。

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