angulartypescriptangular-mock

typescript importing wrong angular


I am importing angular in my angular 1 app (in typescript) using syntax like below

   import * as angular from 'angular';

This imports angular from angular-mocks and not from angular because of which my ILogService implementation fails

ERROR in ./app/shared/Logger.factory.ts (38,7): error TS2420: Class 'Logger' incorrectly implements interface 'ILogService'. Types of property 'debug' are incompatible. Type '(...argument: any[]) => void' is not assignable to type 'ILogCall'.

Even when I try to navigate to 'angular' from vscode I get navigated to angular-mocks angular definition. It should get navigated to angular and not to mock library...

How to avoid this problem?

EDIT

Below is the implementation of

The implementation I have is custom service about which typescript gives an error during compilation (the error is pasted above)

class Logger implements ng.ILogService {
     info(message:string) { //some custom logic in info method}
}

angular.service('logger', Logger)

Solution

  • It's caused because angular-mock's typing is an augmentation to angular's. In other words, a real ILogCall interface should be:

    interface ILogCall {
        (...args: any[]): void;   //from @types\angular\index.d.ts
        logs: string[];    //from @types\angular-mocks\index.d.ts
    }
    

    So in your code:

    info(message:string) { //some custom logic in info method}
    

    you need to return a correct ILogCall object(with all members). @TheChetan and @Natarajan Nagarajugari 's answer may be helpful, but I am not sure whether it would break your TypeScript writing unit tests.

    My solution is in info(message:string):

    info(message:string)
    {
        var logCall: any = (...args: any[]) => {};
        logCall.logs = //something;
    
        return logCall as ng.ILogCall;
    }