TypeScript静态变量定义调用问题：为何无法获取正确值？

开发者阿泽

2026-8-25

问题原因与解决办法

核心问题

你在myClass中同时定义了实例属性counter和静态属性counter，二者是完全独立的变量：

你在onListItemClick方法里用this.counter++操作的是当前实例的counter，所以类内部能输出正确的实例属性值；
静态属性counter仅做了类型声明，既没有初始化值，也从未被修改过，所以外部通过myClass.counter访问时始终是undefined。

修复方案

方案1：仅使用静态属性（适合全局共享计数场景）

如果你的counter是需要全局共享的统计值，只保留静态属性，操作时通过类名访问：

export class myClass implements OnInit {
  // 初始化静态属性为0
  static counter: number = 0;

  onListItemClick(PackDef: PackDefinition): void {
    this.itemClicked.emit(PackDef);
    // 通过类名操作静态属性
    myClass.counter++;
    console.log(myClass.counter); // 打印静态属性值
  }
}

方案2：区分实例属性与静态属性（适合同时统计实例和全局数据）

如果需要同时统计单个实例的点击数和所有实例的总点击数，明确区分两个属性的用途：

export class myClass implements OnInit {
  // 实例属性：当前实例的点击次数
  counter = 0;
  // 静态属性：所有实例的总点击次数，初始化0
  static totalCounter: number = 0;

  onListItemClick(PackDef: PackDefinition): void {
    this.itemClicked.emit(PackDef);
    this.counter++; // 更新当前实例的点击数
    myClass.totalCounter++; // 更新全局总点击数
    console.log('当前实例点击数:', this.counter);
    console.log('全局总点击数:', myClass.totalCounter);
  }
}