TypeScript Inheritance and Injected Constructor Arguments

Question

Using Angular 5 and TypeScript, in the following inheritance scenario, is it possible to not have to include MyService as an argument to the constructor of MyComponent?

export class CBasic {
    // properties and methods
}

export class CAdvanced extends CBasic {

    // constructor
    constructor(
        public myService: MyService
    ) {
        // call constructor of super-class (required)
        super();
    }

    // more properties and methods
}

export class MyComponent extends CAdvanced {

    // constructor
    constructor() {
        // call constructor of super-class (required)
        super(); // Error: [ts] Expected 1 arguments, but got 0.
    }
}

The error I am getting is [ts] Expected 1 arguments, but got 0. in MyComponent.

The point is I want to include MyService in CAdvanced to avoid code-duplication in classes that inherit from it, e.g. MyComponent.

Does the constructor in MyComponent do anything else? If not, you can just remove it. — Martin Parenteau
– Martin Parenteau, Commented Jul 29, 2018 at 16:36

Reactgular · Accepted Answer · 2018-07-29 16:37:20Z

4

You can make the injectable service a property.

export class CAdvanced {
    @Inject(MyService)
    public myService: MyService;

    constructor() {
    }
}

export class MyComponent extends CAdvanced {
    constructor() {
         super(); // no more error
    }
}

Angular will inject the service to the base class via the @Inject decorator.

Alternatively, you can make the parameter optional.

This will silence the error, but the value will be undefined.

export class CAdvanced {
    constructor(public myService?: MyService) {
        console.log(this.myService);
        // above will print undefined
    }
}

export class MyComponent extends CAdvanced {
    constructor() {
         super(); // no more error
    }
}

answered Jul 29, 2018 at 16:37

Reactgular

55.1k24 gold badges174 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user9315861 Over a year ago

The first solution is great, but what's the point of making it optional, since that will result in the service which I need not being injected?

Reactgular Over a year ago

@torazaburo I have no idea. The OP said he was getting a TypeScript error that the parameter was missing. Making it optional suppresses the error, and I do clarify that it becomes undefined. It's up to the OP to decide if that's how he/she wants to fix the error. Maybe there are some derived classes that have the parameter and others that don't. Who knows.

user9315861 Over a year ago

Are there any downsides or gotchas in doing your own @Inject(), compared to having Angular do it for your in the regular way? I seem to recall there's some way to specify injection directly in the constructor's parameter list--is that an option here?

Reactgular Over a year ago

@torazaburo The @Inject decorator is a standard Angular feature. It can be used in both the properties or constructor parameters. Ex constructor(@Inject(MyService) my:MyService). It is used where the DI type can not be inferred via the parameter type (i.e. injecting strings). You don't see inject done on properties because all the examples are via parameters, but there is nothing wrong with doing it that way. From JavaScript code it's basically the same thing.

Collectives™ on Stack Overflow

TypeScript Inheritance and Injected Constructor Arguments

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related