Error message in Typescript: When a class has initialized properties, a 'super' call must be the first statement in the constructor

Question

Error message in Typescript: When a class has initialized properties, a 'super' call must be the first statement in the constructor

I am currently facing some typescript errors in my project. Would you like to see a sample of the code that is causing the issue? Here is a snippet:

module CoreWeb {
export class Controller implements IController {
    public $q;
    ...

This piece of code showcases a class that extends the controller class, among other classes.

declare var App: ng.IModule;

module CoreWeb {
    export class EntityMasterController extends Controller {
        private currenciesDataSet;
        ...

However, I have encountered an error during gulp when I attempted to initialize merchandisingConstants before calling super as shown above. The error message indicates that a super call must be the first statement in the constructor when a class has initialized properties or parameter properties. I have tried various approaches to resolve these errors but have been unsuccessful so far. Any suggestions on how I can tackle this issue?

javascript angularjs backbone.js typescript

Answer 1

Answer №1

When you inherit from a class, the constructor:

Has to invoke super()
Must be called before any other actions

In this particular scenario, all you need to do is rearrange some things:

declare var App: ng.IModule;

module CoreWeb {
    export class EntityMasterController extends Controller {
        private currenciesDataSet;
        private entity: IEntityMasterModel;
        private merchandisingConstants;
        private typeAheadOptions;

    constructor(
        $q:ng.IQService,
        $rootScope,
        $scope:ng.IScope,
        $state,
        $translate:ng.translate.ITranslateService,
        appEvents,
        commonValidationsService,
        entityDataService,
        merchandisingConstants,
        ngDialog,
        notificationsService,
        titleDataFactory
    ) {
        // Should come first
        super(
            $q,
            $rootScope,
            $scope,
            $state,
            $translate,
            appEvents,
            commonValidationsService,
            "entity",
            null,
            entityDataService,
            "name",
            ngDialog,
            notificationsService,
            "createEntity",
            "getCurrentEntity",
            "getEntity",
            "updateEntity",
            titleDataFactory
        );

        this.merchandisingConstants = merchandisingConstants;
    }

Answer 2

When you inherit from a class, the constructor:

Has to invoke super()
Must be called before any other actions

In this particular scenario, all you need to do is rearrange some things:

declare var App: ng.IModule;

module CoreWeb {
    export class EntityMasterController extends Controller {
        private currenciesDataSet;
        private entity: IEntityMasterModel;
        private merchandisingConstants;
        private typeAheadOptions;

    constructor(
        $q:ng.IQService,
        $rootScope,
        $scope:ng.IScope,
        $state,
        $translate:ng.translate.ITranslateService,
        appEvents,
        commonValidationsService,
        entityDataService,
        merchandisingConstants,
        ngDialog,
        notificationsService,
        titleDataFactory
    ) {
        // Should come first
        super(
            $q,
            $rootScope,
            $scope,
            $state,
            $translate,
            appEvents,
            commonValidationsService,
            "entity",
            null,
            entityDataService,
            "name",
            ngDialog,
            notificationsService,
            "createEntity",
            "getCurrentEntity",
            "getEntity",
            "updateEntity",
            titleDataFactory
        );

        this.merchandisingConstants = merchandisingConstants;
    }

Answer 3

Answer №2

Here's a clever workaround I came up with to tackle this problem:

    super(
        (this.merchandisingConstants = merchandisingConstants, $q),
        $rootScope,
        $scope,
        $state,
        $translate,
        appEvents,
        commonValidationsService,
        "entity",
        null,
        entityDataService,
        "name",
        ngDialog,
        notificationsService,
        "createEntity",
        "getCurrentEntity",
        "getEntity",
        "updateEntity",
        titleDataFactory
    );

This approach uses the rather unconventional JavaScript , operator to perform an assignment as a side effect within the argument list of the function call. While any parameter could be manipulated in this way, I chose to do it with the first one. The comma operator, which is distinct from the comma used to separate arguments in a function, allows you to chain expressions together, all of which will be evaluated. However, only the last expression will determine the value of the overall expression.

By utilizing this technique, the assignment takes place while the arguments are being evaluated. So, even though the first parameter retains its original value of $q, the assignment still occurs prior to invoking the super() function.

Answer 4

Here's a clever workaround I came up with to tackle this problem:

    super(
        (this.merchandisingConstants = merchandisingConstants, $q),
        $rootScope,
        $scope,
        $state,
        $translate,
        appEvents,
        commonValidationsService,
        "entity",
        null,
        entityDataService,
        "name",
        ngDialog,
        notificationsService,
        "createEntity",
        "getCurrentEntity",
        "getEntity",
        "updateEntity",
        titleDataFactory
    );

This approach uses the rather unconventional JavaScript , operator to perform an assignment as a side effect within the argument list of the function call. While any parameter could be manipulated in this way, I chose to do it with the first one. The comma operator, which is distinct from the comma used to separate arguments in a function, allows you to chain expressions together, all of which will be evaluated. However, only the last expression will determine the value of the overall expression.

By utilizing this technique, the assignment takes place while the arguments are being evaluated. So, even though the first parameter retains its original value of $q, the assignment still occurs prior to invoking the super() function.

Error message in Typescript: When a class has initialized properties, a 'super' call must be the first statement in the constructor

Answer №1

Answer №2

Similar questions

Refresh required to showcase newly created items

When should you use isRequired for PropType versus defaultProps in a React application?

Determine the percentage using jQuery by considering various factors

Using v-model with the Toast-UI editor in Vue.js adds a dynamic and

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module

Manipulating the DOM by nesting an icon within a button element in HTML

What is the process for uploading an image file in Node.js?

Issue with updating component

Fade out all the other images using jQuery

Determine in Node.js if a word has been altered or has an additional letter compared to the previous word

Is it possible to transform an array of objects into a new array of objects?

What are the best methods for looping through ids in MongoDB and executing actions on them?

``Should one prioritize the use of Generics over Inheritance, or is there a better way

The Battle: AJAX FormData vs encodeURI

Finding elements based on a specific parent structure in JavaScript: A step-by-step guide

Tips on implementing v-show within a loop

Exploring the values of a JavaScript promise while iterating through a for loop

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

Using AngularJS, we can create a nested ng-repeat with an expression to filter the

AngularJS: Automatically refreshing ng-repeat based on checkbox filter updates in code