React+TypeScript电商项目中bigint作为索引签名参数的兼容问题解决方案咨询

我之前做电商项目时也碰到过一模一样的问题，TypeScript确实严格限制了对象索引签名的类型只能是string或number，但咱们完全可以在保留bigint作为ID的业务前提下，用这几个可行方案解决：

方案1：将bigint转换为字符串作为索引 #

JS里对象的键本质上都会被隐式转成字符串，那咱们就主动把bigint类型的ID转成字符串当索引键，既符合TS规则，又不影响业务逻辑。

修改后的代码示例：

export class CartItem {
  public id: bigint;
  public file: File;
  public constructor(file: File) {
    this.id = file.id;
    this.file = file;
  }
}

export class Cart{
  // 把索引类型改为string
  public items: { [id: string]: CartItem };
  public constructor() {
    this.items = {};
  }

  // 添加商品时自动转换ID为字符串
  addItem(item: CartItem) {
    this.items[String(item.id)] = item;
  }

  // 获取商品时同样转换ID格式
  getItem(id: bigint) {
    return this.items[String(id)];
  }

  // 删除商品的方法
  removeItem(id: bigint) {
    delete this.items[String(id)];
  }
}

这个方案的好处是不用大改现有代码结构，熟悉对象操作的话上手很快；缺点是每次操作都要手动做类型转换，偶尔容易遗漏。

方案2：使用Map<bigint, CartItem>替代对象索引 #

TypeScript的Map类型天生支持bigint作为键，这是最贴合需求的方案——不需要任何类型转换，类型安全性拉满，操作也更规范。

修改后的代码示例：

export class CartItem {
  public id: bigint;
  public file: File;
  public constructor(file: File) {
    this.id = file.id;
    this.file = file;
  }
}

export class Cart{
  // 用Map替换对象，键类型直接设为bigint
  public items: Map<bigint, CartItem>;
  public constructor() {
    this.items = new Map();
  }

  // 添加商品
  addItem(item: CartItem) {
    this.items.set(item.id, item);
  }

  // 获取商品
  getItem(id: bigint) {
    return this.items.get(id);
  }

  // 删除商品
  removeItem(id: bigint) {
    this.items.delete(id);
  }

  // 按需获取所有商品列表
  getAllItems() {
    return Array.from(this.items.values());
  }
}

这个方案的优势是完全符合TS类型规范，不用手动转换，Map本身还提供了has、clear等实用方法，适合复杂的购物车操作；唯一需要适应的是从对象的方括号语法切换到Map的get/set方法。

方案3：类型断言（不推荐） #

如果实在必须用对象存储，可以用类型断言暂时绕过TS检查，但这种方法会损失类型安全性，容易埋下隐藏bug，生产环境不建议用：

export class Cart{
  public items: { [id: string]: CartItem };
  public constructor() {
    this.items = {};
  }

  addItem(item: CartItem) {
    // 强制断言bigint为string类型
    this.items[item.id as unknown as string] = item;
  }
}

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