WebStorm and TypeScript is not finding dependency injections in AngularJS

Question

An AngularJS component in TypeScript:

class MyComponentCtrl {
    static $inject = ['MyService'];
    constructor(private MyService) {
      MyService.testfn(55); // No error in typescript
    }
}

class MyComponent implements ng.IComponentOptions {
    constructor() {
        this.controller = MyComponentCtrl;
        this.template = 'hello';
    }
}

angular
    .module('app')
    .component('MyComponent', new MyComponent());

An AngularJS service in TypeScript:

class MyService {
    constructor() {

    }

    public testfn(age: number) {
        console.log(age);
    }
}

angular
    .module('app')
    .service('MyService', MyService);

When I hit Cmd + Click on the testfn in WebStorm, it's not found ("No decleration to go to"). Also, the TypeScript compiler is not giving error when I use testfn with invalid argument.

When I click on MyService in static $inject WebStorm finds it correctly.

Can I structure this differently somehow so WebStorm and TypeScript finds it?

Estus Flask · Accepted Answer · 2018-03-18 11:36:19Z

1

Injected MyService is any, so it doesn't cause type error.

It's impossible for IDE or TypeScript to determine that it is an instance of MyService service. Also, injecting it as MyService is misleading, because it's class instance, not a class itself.

A class should be exported:

export class MyService {...}

It should be imported and specified as injected service type:

class MyComponentCtrl {
    static $inject = ['MyService'];
    constructor(private myService: MyService) {
      myService.testfn(55);
    }
}

answered Mar 18, 2018 at 11:36

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Collectives™ on Stack Overflow

WebStorm and TypeScript is not finding dependency injections in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related