Angular ngOnChanges方法ESLint规则AST选择器优化咨询

校验需求 #

• 该方法必须接收一个类型为SimpleChanges的名为changes的参数；
• 在方法内部访问currentValue等属性时，必须使用可选链调用。

代码示例 #

无效代码 #

public ngOnChanges(notChangesName: NotSimpleShanges) {
  notChangesName.property.currentValue;
}

有效代码 #

public ngOnChanges(changes: SimpleShanges) {
  changes.property?.currentValue;
}

初始ESLint配置 #

"no-restricted-syntax": [
  "error",
  {
    "message": "Changes currentValue should be optionally chained",
    "selector": "MemberExpression[optional=false] > Identifier[name=\"currentValue\"]"
  },
  {
    "message": "ngOnChanges should have 'changes' as an argument of type 'SimpleChanges'",
    "selector": "MethodDefinition[key.name=\"ngOnChanges\"] > FunctionExpression > Identifier[name!=\"changes\"]"
  },
  {
    "message": "ngOnChanges should have 'changes' as an argument of type 'SimpleChanges'",
    "selector": "MethodDefinition[key.name=\"ngOnChanges\"] > FunctionExpression > BlockStatement:not(:has(Parameter))"
  }
]

初始配置存在的问题 #

• 选择器MemberExpression[optional=false] > Identifier[name=\"currentValue\"]会校验所有变量的currentValue访问是否使用可选链，未限定仅针对名为changes的变量；
• 选择器MethodDefinition[key.name=\"ngOnChanges\"] > FunctionExpression > Identifier[name!=\"changes\"]未校验changes参数的类型是否为SimpleChanges。

优化后的ESLint配置 #

"no-restricted-syntax": [
  "error",
  {
    "message": "Properties 'currentValue | firstChange | previousValue | isFirstChange' should be optional",
    "selector": "MethodDefinition[key.name='ngOnChanges'] MemberExpression[object.object.name='changes'][optional=false][property.name=/.*/]"
  },
  {
    "message": "ngOnChanges should have 'changes' as an argument",
    "selector": "MethodDefinition[key.name='ngOnChanges'] > FunctionExpression > Identifier[name!='changes']"
  },
  {
    "message": "ngOnChanges should have 'changes: NgChanges' as an argument",
    "selector": "MethodDefinition[key.name='ngOnChanges'] > FunctionExpression > Identifier >  TSTypeAnnotation > TSTypeReference > Identifier[name!='SimpleChanges']"
  },
  {
    "message": "ngOnChanges should have one argument 'changes: NgChanges'",
    "selector": "MethodDefinition[key.name='ngOnChanges'] > FunctionExpression[params.length!=1]"
  }
]

待确认问题 #

现需确认该优化方案是否完善，或是否存在可改进之处。

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