ESLint Plugin Perfectionist 中的静态属性依赖解析问题分析

问题背景

在 TypeScript 类定义中，静态属性和实例属性虽然可以同名，但它们属于不同的作用域。ESLint Plugin Perfectionist 的 sort-classes 规则在处理类成员排序时，未能正确区分这两种属性类型，导致在某些情况下会错误地识别依赖关系。

问题重现

考虑以下 TypeScript 类定义：

export class Class {
  b = 1;
  a = this.b;

  static b = 1;
}

当配置 sort-classes 规则将普通属性和静态属性归为同一组时：

"groups": [
  ["property", "static-property"]
]

插件会错误地认为实例属性 a 依赖于静态属性 b，从而要求将 static b 移到 a 前面。实际上，a 依赖的是实例属性 b，与静态属性 b 完全无关。

技术原理分析

TypeScript 中的作用域隔离

在 TypeScript/JavaScript 中：

1. 实例属性通过 this 访问，属于实例作用域
2. 静态属性通过类名访问，属于类作用域
3. 同名静态属性和实例属性可以共存，互不干扰

依赖解析的缺陷

原实现中的依赖解析逻辑存在两个主要问题：

1. 未考虑成员访问的上下文（this 访问 vs 类名访问）
2. 在收集依赖时，没有区分静态成员和实例成员

解决方案

修复方案需要改进依赖解析算法：

1. 分析属性访问表达式，区分 this. 访问和 ClassName. 访问
2. 在构建依赖图时，将静态成员和实例成员视为不同的节点
3. 只在相同作用域内建立依赖关系

实际影响

这个问题会影响以下场景：

1. 类中同时存在同名静态属性和实例属性
2. 实例属性引用了另一个实例属性
3. 静态属性引用了另一个静态属性

正确的实现应该确保：

• 实例属性间的引用影响排序
• 静态属性间的引用影响排序
• 跨作用域的引用不影响排序

最佳实践建议

1. 尽量避免在同一个类中使用同名的静态属性和实例属性
2. 明确区分静态成员和实例成员的命名
3. 对于复杂的类结构，考虑使用多组排序规则分别处理静态和实例成员

该修复已在 ESLint Plugin Perfectionist 3.4.0 版本中发布，开发者可以升级到最新版本来解决此问题。