Question

TypeScript中的AngularJS组件：

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());

TypeScript中的AngularJS服务：

class MyService {
    constructor() {

    }

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

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

当我在WebStorm的testfn上点击 Cmd + Click 时，找不到它（“没有去除”）。此外，当我使用带有无效参数的testfn时，TypeScript编译器不会出错。

当我点击MyService static $inject时，WebStorm会正确找到它。

我可以以某种方式以不同的方式构造它，以便WebStorm和TypeScript找到它吗？

Answer 1

注入MyService为any，因此不会导致类型错误。

IDE或TypeScript无法确定它是MyService服务的实例。此外，将其注入MyService会产生误导，因为它是类实例，而不是类本身。

应该导出一个类：

export class MyService {...}

应将其导入并指定为注入服务类型：

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

WebStorm和TypeScript没有在AngularJS中找到依赖注入

1 个答案: