TypeScript中使用map将数组转为[number, number]元组数组的类型问题

你遇到的问题是TypeScript默认会把[xi, 3*xi]这种数组字面量推断为number[]类型，所以最终pos的类型就变成了number[][]。要让它推断成[number, number][]，可以用下面几种实用方法：

方法1：给箭头函数指定返回类型 #

直接在回调函数后明确返回值的元组类型，可读性最强，也是最直观的方式：

const x: number[] = [1,2,3,4,5];
const pos = x.map((xi): [number, number] => [xi, 3 * xi]);
// pos的类型现在是 [number, number][]

方法2：使用类型断言as #

在数组字面量后面断言为目标元组类型，强制告诉TS这不是普通数组而是固定长度的元组：

const x: number[] = [1,2,3,4,5];
const pos = x.map(xi => [xi, 3 * xi] as [number, number]);
// pos的类型同样是 [number, number][]

方法3：使用as const断言（只读元组场景） #

如果业务场景可以接受只读元组，用as const让TS推断出精确的只读元组类型，后续若需要普通元组再做一次转换：

const x: number[] = [1,2,3,4,5];
// 先得到 readonly [number, number][] 类型
const posReadonly = x.map(xi => [xi, 3 * xi] as const);
// 转成普通元组数组
const pos = posReadonly as [number, number][];

日常开发里，方法1和方法2最常用，方法1的代码语义更清晰，能直接让其他开发者看到回调的返回类型约定。

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