AngularJS TypeScript Service Error

Question

I'm getting this error trying to add a service to a module. Can someone help point out what's wrong?

Angular 1.5.11 and TypeScript 2.2.2

ERROR in ./source/mainModule.ts (185,33): error TS2345: Argument of type 'typeof AwesomeService ' is not assignable to parameter of type 'Injectable<Function>'. Type 'typeof AwesomeService ' is not assignable to type '(string | Function)[]'. Property 'push' is missing in type 'typeof AwesomeService '.

Here is where I'm trying to add the service

export default angular.module('iris.service', []) /* This line throws the error --> */.service('awesomeService', AwesomeService);

In a separate file, here is how I'm creating the service

export class AwesomeService extends OtherClass { private static $inject = ['configService']; constructor() { super(); } }

update:

I see that if I change AwesomeService to a function and export that, it works fine. Is there any way I can use a class for a Service? It looks like @types/angular specifies that the second argument to angular.module.service should be either a string or a function.

What about if you capitalise 'AwesomeService' like this: export default angular.module('iris.service', []).service('AwesomeService', AwesomeService); — MMachinegun
– MMachinegun, Commented May 18, 2017 at 16:53
That doesn't change anything. That can be any arbitrary name. — Spencer
– Spencer, Commented May 18, 2017 at 17:04
@Spencer yeah, the only advantage to using the same casing for the registered name and the registered value is that you can write .module('iris.service', []).service({ AwesomeService }) which is a convenient shorthand especially if you use certain registration patterns. — Aluan Haddad
– Aluan Haddad, Commented May 19, 2017 at 20:26

Aluan Haddad · Accepted Answer · 2023-05-16 06:43:49Z

Yes, you can do exactly what you want, you simply need to write less code.

The type declaration in @types/angular includes the following

declare global { interface Function { $inject?: ReadonlyArray<string>; } }

This augments the declaration of the Function type. Adding an optional property, $inject, to allow for clean, readable AngularJS DI annotations to be added to classes and functions in a type safe and declarative manner without the need for unsightly type assertions.

Note that all classes and functions are in fact functions.

The problem with your class is that, while the Function type augmentation above states that $inject is optional, it does not state that when it is specified, that it may be private.

In fact, it is very much not private, semantically, as it is read by the AngularJS framework and potentially other tools as well.

To resolve the issue simply write

export class AwesomeService extends OtherClass { static $inject = ['configService']; // no private here. constructor() { super(); } }

The more detailed answer is that two types are considered structurally incompatible if one declares a private member (to do this it needs to be a class) with the same name as a public member in the other (all interface members are public).

Unfortunately, the error is a bit cryptic. The private $inject declaration causes the type checker to immediately remove the overload of service which takes a value of type Function. It then tries the overload of service which takes a value of type Array and fails.

Amazing. I guess I was thinking of the transpiled JavaScript where public/private both turn into the same AwesomeService.$inject. Thanks for helping me remember that TypeScript is smarter!

Collectives™ on Stack Overflow

AngularJS TypeScript Service Error

update:

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

update:

1 Answer 1

2 Comments

Related