如何为for...in循环的迭代器指定数值字符串类型？

你遇到的问题是TypeScript对for...in循环的迭代器类型推断偏保守：数组的for...in迭代器会被推断为string类型，即便它实际是数组索引的字符串形式（符合${number}），导致无法直接传给要求NumericalString类型的函数。以下是几种不用手动转数字的解决方法：

方法1：类型断言（最简单直接） #

直接将迭代器i断言为NumericalString，因为我们明确知道数组的for...in迭代器只会是合法的索引字符串：

type NumericalString = `${number}` | number

function test (i: NumericalString) {
    console.log(i, typeof i)
}

for (const i in ['a', 'b', 'c']) {
    test(i as NumericalString) // 类型断言
}

方法2：自定义类型守卫（更严谨） #

如果想让TypeScript通过类型检查自动收窄类型，可以写一个类型守卫函数验证字符串是否为数值格式：

type NumericalString = `${number}` | number

function test (i: NumericalString) {
    console.log(i, typeof i)
}

// 类型守卫：判断字符串是否为纯数字格式
function isNumericalString(s: string): s is `${number}` {
  return /^\d+$/.test(s);
}

for (const i in ['a', 'b', 'c']) {
    if (isNumericalString(i)) {
        test(i) // 此时i的类型会被收窄为`${number}`，符合NumericalString
    }
}

方法3：封装迭代工具函数（适合频繁使用场景） #

如果需要多次用这种方式遍历数组索引，可以封装一个工具函数，提前处理好类型：

type NumericalString = `${number}` | number

function test (i: NumericalString) {
    console.log(i, typeof i)
}

// 封装遍历数组索引的工具函数，回调参数直接推断为`${number}`
function iterateArrayIndices<T>(arr: T[], callback: (index: `${number}`) => void) {
  for (const i in arr) {
    callback(i as `${number}`);
  }
}

// 使用工具函数
iterateArrayIndices(['a', 'b', 'c'], (i) => {
    test(i);
    // 适配你的实际场景：关联两个数组
    // const arr2 = ['cat', 'dog', 'mouse'];
    // console.log(arr2[i]);
});

补充说明 #

TypeScript之所以默认把for...in的迭代器推断为string，是因为for...in本质是遍历对象的所有可枚举属性，而JS中对象的键都是字符串类型——虽然数组的索引行为类似数字，但它在底层仍是字符串。但对于数组来说，我们可以安全地将这些索引字符串断言为${number}类型，因为数组不会有非数值格式的键。

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