如何在TypeScript中创建可模拟Number行为的自定义ArrayIndex类？

问题根源 #

TypeScript 对数组索引的类型有严格限制，仅允许 number 或 string 类型。即便你的 ArrayIndex 类重写了 valueOf()，类型系统也不会自动将其识别为 number，因此会抛出类型错误。另外原生运算符（如 +=）虽然能通过 valueOf() 获取数值，但无法自动更新类内部的 value 属性。

完整实现方案 #

要实现和原生 number 近乎一致的交互体验，需从类型兼容和运算符支持两方面调整：

class ArrayIndex {
  private value: number;

  constructor(initialValue: number = 0) {
    this.value = initialValue;
  }

  // 处理原始类型转换，让JS/TS能识别其数值行为
  get [Symbol.toPrimitive](hint: string): number | string {
    return hint === 'string' ? this.value.toString() : this.value;
  }

  // 实现+=的等价操作
  plusAssign(num: number): void {
    this.value += num;
  }

  // 快速获取数值（可选）
  toNumber(): number {
    return this.value;
  }
}

关键优化点

• Symbol.toPrimitive：重写该方法后，当对象需要转换为原始类型（比如作为数组索引、参与运算）时，JS会自动调用它，同时TypeScript的类型检查也能更好地适配。
• 自定义运算符方法：原生运算符无法直接重载，但plusAssign方法可以实现和+=一致的逻辑；如果偏好原生语法，也可以结合valueOf手动更新：

  let idx = new ArrayIndex(5);
  idx.value = idx + 3; // 利用valueOf获取数值后重新赋值
  

使用示例

const input = ["Name", "John Doe", "Social Media", "Name", "Sites", "UID", "Facebook", "www.facebook.com", "1", "Name", "Sites", "UID", "StackOverflow", "www.stackoverflow.com", "2"];
let index = new ArrayIndex(5);

// 作为数组索引使用（TS环境下需类型断言）
console.log(input[index as unknown as number]); // 输出"UID"

// 使用plusAssign更新索引
index.plusAssign(2);
console.log(input[index as unknown as number]); // 输出"www.facebook.com"

// 用原生+=语法更新
index.value = index + 1;
console.log(input[index as unknown as number]); // 输出"1"

极简替代方案（完全兼容number） #

如果不需要类的额外逻辑，仅需要区分普通number和数组索引，可使用TypeScript品牌类型：

type ArrayIndex = number & { __brand: 'ArrayIndex' };

const createArrayIndex = (initial: number = 0): ArrayIndex => initial as ArrayIndex;

// 使用方式
let idx = createArrayIndex(5);
input[idx]; // 直接可用，类型检查通过
idx += 2; // 原生运算符完全支持

这种方式既保留了number的所有原生行为，又能通过类型系统区分索引和普通数值，适合简单场景。

内容的提问来源于stack exchange，提问作者Irfandy J.