Angular 2 DI coding to an interface

Question

With the new angular 2 DI we can do this:

import HeroService from './HeroService';

bootstrap(AppComponent, [provide(HeroService,{useClass:HeroService})]);

There is a way to code to an interface so we can do this?

// typescript does not compile interfaces to plain js, we can use this in the provide function?
interface SomeInterface { name: string }

class HeroService implements SomeInterface {}

bootstrap(AppComponent, [provide(SomeInterface,{ useClass: HeroService })]);

// component
class myComponent {

    constructor(hero: SomeInterface) {}

}

Looks like a dup of stackoverflow.com/questions/31202162/…. I'm not a TS developer but Angular itself seems to use it github.com/angular/angular/blob/… as well. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 18, 2016 at 8:29

Community · Accepted Answer · 2017-05-23 11:46:43Z

2

I'm not sure that such approach is possible since interfaces are erased at runtime in TypeScript and can be referenced.

If you try this in your service:

export interface SomeInterface {
  someMethod();
}

export class HeroService implements SomeInterface {
  (...)
}

We will have undefined when trying to import it from another module:

import {HeroService,SomeInterface} from './hello.service';

console.log('service = '+HeroService); // <---- not null
console.log('interdace = '+SomeInterface); // <---- undefined

Here is a plunkr describing this: https://plnkr.co/edit/RT59B0tw40lnq85XMMi7?p=preview.

This answer could also give you some additional hints: Interface based programming with TypeScript, Angular 2 & SystemJS.

Hope it helps you, Thierry

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jan 18, 2016 at 8:27

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

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

1 Comment

yeraycaballero Over a year ago

It seems it can be done using tokens. See a working version in the next link plnkr.co/edit/A6ezGRUlrFsfLr4GjaGi

Collectives™ on Stack Overflow

Angular 2 DI coding to an interface

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related