如何在TypeScript中对数组使用ProxyHandler并处理数字类型键？

问题原因 #

在JavaScript中，数组的数字索引本质上会被转换为字符串处理，所以Proxy的get陷阱接收的key参数类型是string | symbol。但TypeScript对数组的索引有严格类型要求，必须是number类型，直接使用target[key]就会触发类型错误。

解决方案 #

这里提供几种可行的处理方式：

1. 安全转换key为数字

先判断key是否能转换为有效的数组索引，再进行取值：

const arr = [0, 1, 2, 3, 4, 5]

const proxyHandler: ProxyHandler<typeof arr> = {
    get: (target, key) => {
        console.log(key)
        // 检查key是否为数字字符串，且在数组索引范围内
        if (typeof key === 'string' && !isNaN(Number(key)) && Number(key) >= 0 && Number(key) < target.length) {
            return target[Number(key)];
        }
        // 处理其他属性（比如length、push等方法）
        return (target as any)[key];
    },
}

const proxyArray = new Proxy(arr, proxyHandler)

proxyArray[1] // 输出1，无类型错误

2. 类型断言（简化场景）

如果能确定访问的key都是有效的数组索引字符串，可以直接用类型断言：

const arr = [0, 1, 2, 3, 4, 5]

const proxyHandler: ProxyHandler<typeof arr> = {
    get: (target, key) => {
        console.log(key)
        // 断言key为number类型（仅在确定key是有效索引时使用）
        return target[key as unknown as number];
    },
}

const proxyArray = new Proxy(arr, proxyHandler)

proxyArray[1]

3. 兼容所有属性访问

如果需要同时处理数组索引和其他属性（比如length、数组方法），可以用as any临时放宽类型限制：

const arr = [0, 1, 2, 3, 4, 5]

const proxyHandler: ProxyHandler<typeof arr> = {
    get: (target, key) => {
        console.log(key)
        return (target as any)[key];
    },
}

const proxyArray = new Proxy(arr, proxyHandler)

proxyArray[1] // 正常取值
proxyArray.length // 正常获取length属性

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