TypeScript键值数组定义后VSCode类型推导出现多余number|联合类型如何解决

问题原因 #

1. 你对grid的类型定义存在误解：你写的[key: number, value: [key: number, value: Point]]是TypeScript的带标签元组类型，标签仅用于代码可读性提示，不会改变类型结构，该类型本质是[number, [number, Point]]，也就是固定长度为2的数组：
   • 索引0对应值类型为number
   • 索引1对应值类型为[number, Point]
2. TypeScript对元组的负索引推导规则是：仅当负索引的绝对值小于等于元组长度时，才会推导到对应位置的精确类型；如果负索引超出范围（比如长度为2的元组用-5访问），会被视为通用number类型索引，返回元组所有元素的类型联合，也就是你遇到的number | [key: number, value: Point]的情况，后续子元组的访问异常也是同理。

解决方案 #

根据你的实际使用场景选择对应方案即可：

场景1：确实需要使用固定长度元组 #

只需要使用合法范围内的负索引即可得到精确类型，无需额外断言：

// 长度为2的元组，合法负索引为-1、-2
// -1对应元组第二个元素，类型为 [number, Point]
const col = grid[-1];
// 子元组长度为2，-1对应第二个元素，类型为Point
const pnt = col[-1];

场景2：需要「任意数字作为索引，返回对应值类型」的字典结构 #

这是绝大多数业务场景下的预期用法，你之前的类型定义混淆了带标签元组和索引签名类型，修改类型定义即可：

interface Point {
    x: number;
    y: number;
}

// 定义数字索引的字典类型：任意数字键对应的值是另一个数字索引字典，值为Point
type Grid = Record<number, Record<number, Point>>;
// 也可以用索引签名写法：let grid: { [key: number]: { [key: number]: Point } }

let grid: Grid = {};
// 现在任意数字索引访问，推导类型都是 Record<number, Point>
const col = grid[-5];
// 继续访问数字索引，推导类型都是Point
const pnt = col[-2];

修改后访问任意负索引都不会出现多余的联合类型，完全符合预期。如果需要临时兼容旧的元组类型写法，也可以直接用类型断言强制指定返回类型：

const col = grid[-5] as [key: number, value: Point];
const pnt = col[-2] as Point;

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