Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)
like image 468
harishr Avatar asked Jan 14 '17 16:01

harishr


2 Answers

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;
}
like image 82
Clark.Hsu Avatar answered Oct 21 '22 11:10

Clark.Hsu


try this..

import * as _angular_ from 'angular';

declare global {
const angular: typeof _angular_;
}

Hope it would help you

like image 45
Natarajan Nagarajugari Avatar answered Oct 21 '22 10:10

Natarajan Nagarajugari