TypeScript中super()调用报错：参数不匹配构造函数签名

Let's break down why you're hitting this error and walk through actionable fixes.

The Root Cause #

Your subclass CreateRuleTemplate calls super($scope, $injector) to invoke the parent PanelCtrl constructor, but the grunt-typescript compiler is struggling to confirm your parameters match the parent's signature. This typically stems from one of two issues:

• The compiler can't infer the types of your subclass constructor's first two parameters, leading it to doubt compatibility with the parent's any-typed parameters.
• Older TypeScript versions (which grunt-typescript might be using) have stricter handling of constructor parameters with access modifiers (like private) when paired with super calls.

Solution 1: Explicitly Type Constructor Parameters #

Add clear type annotations to the first two parameters in your subclass constructor to mirror the parent class's types. This eliminates ambiguity for the compiler:

class CreateRuleTemplate extends PanelCtrl {
  constructor(
    $scope: any, 
    $injector: any, 
    private $rootScope: any, 
    private datasourceSrv: any
  ) {
    super($scope, $injector);
  }
}

By specifying : any for $scope and $injector, you explicitly tell the compiler these parameters align perfectly with what the parent constructor expects.

Solution 2: Avoid Parameter Properties for Extra Dependencies #

If the first fix doesn't resolve the issue (maybe due to an older TypeScript version), declare private properties directly in the class and assign them manually in the constructor instead of using parameter properties:

class CreateRuleTemplate extends PanelCtrl {
  private $rootScope: any;
  private datasourceSrv: any;

  constructor($scope, $injector, $rootScope, datasourceSrv) {
    super($scope, $injector);
    this.$rootScope = $rootScope;
    this.datasourceSrv = datasourceSrv;
  }
}

This approach bypasses any compiler quirks related to mixing parameter properties with super calls in older TypeScript releases.

Solution 3: Validate grunt-typescript Configuration #

Double-check your grunt-typescript settings to ensure you're using a TypeScript version that supports modern inheritance and parameter property syntax. You can pin the TypeScript version in your package.json or grunt config to avoid relying on an outdated compiler that might misinterpret your code.

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