TypeScript遍历Tuple时如何通过数组索引正确识别map中元素类型？

问题原因 #

TypeScript 里的 Tuple（元组）是固定长度、每个位置类型固定的特殊数组，但它的map方法继承自通用的Array接口，调用map时会发生两个类型拓宽：

1. Tuple 会被自动拓宽为元素类型是所有位置类型联合的普通数组，你示例中的Tuple就会被拓宽为(number | string)[]，因此回调参数el的类型默认推导为number | string。
2. map回调的索引参数i的类型是通用number，TS 不会将它和 Tuple 固定位置的索引做关联，因此你用i === y.length - 1做判断时，也无法触发el的类型收窄。

解决方案 #

方案1：简单场景直接用类型断言 #

如果逻辑简单、你明确知道每个索引对应的元素类型，直接给el加上类型断言即可：

type Tuple = [number, number, string];
const y: Tuple = [1, 2, 'apple'];

const result = y.map((el, i) => {
    if (i === y.length - 1) {
        // 确定最后一位是string，直接断言
        return (el as string) + "pear";
    } else {
        // 前两位是number，断言即可
        return (el as number) + 3;
    }
})

如果需要返回结果也是 Tuple 类型，可以在最后再加一层断言as [number, number, string]。

方案2：直接按索引访问，无需遍历 #

因为 Tuple 长度固定，完全可以直接按索引处理每个元素，TS 可以完全正确推导每个位置的类型，不需要额外断言：

type Tuple = [number, number, string];
const y: Tuple = [1, 2, 'apple'];

const result: Tuple = [
    y[0] + 3,
    y[1] + 3,
    y[2] + "pear"
]

方案3：封装Tuple专属map工具函数（更通用） #

如果经常需要处理 Tuple 的遍历操作，可以封装一个支持类型推导的map工具函数，索引和元素类型都可以自动收窄：

// 泛型工具函数，支持Tuple类型的map操作
function mapTuple<T extends any[], U>(tuple: [...T], callback: (item: T[number], index: keyof T & number, tuple: T) => U): { [K in keyof T]: U } {
    return tuple.map(callback) as any;
}

// 实际使用
type Tuple = [number, number, string];
const y: Tuple = [1, 2, 'apple'];

const result = mapTuple(y, (el, i) => {
    // 这里i的类型自动推导为 0 | 1 | 2，判断i === 2时可以自动收窄el的类型为string
    if (i === 2) {
        return el + "pear";
    } else {
        return el + 3;
    }
})
// result的类型会自动推导为 [number, number, string]，不需要额外断言

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