Angular 2 OpaqueToken vs Angular 4 InjectionToken

Question

InjectionToken was introduced in Angular 4 and OpaqueToken was marked as deprecated.

According to the manual, it is supposed to be used as

const anyToken = new InjectionToken('any');

for untyped token, and as

const numberToken = new InjectionToken<number>('number');

for typed token.

However, typed token still can be injected and used with different type when it is injected, TypeScript will be ok with this, won't it?

constructor(@Inject(numberToken) any, @Inject(numberToken) string: string) { ... }

How is InjectionToken supposed to benefit from TypeScript type system?

Why was OpaqueToken deprecated if there's no practical difference between those two?

score 27 · Accepted Answer · edited Feb 19 '19 at 14:47

27

Based on the internal usage of InjectionToken, for example, here, I assume that InjectionToken gives you type checking benefit when getting a dependency through injector instance:

import {Component, InjectionToken, Injector} from "@angular/core";

interface AppConfig {
    name: string;
}

let APP_CONFIG = new InjectionToken<AppConfig>('app.config');
let appConfig: AppConfig = {name: 'Cfg'};

@Component({
    ...
    providers: [{provide: APP_CONFIG, useValue: appConfig}]
})
export class TestComponent {
    constructor(injector: Injector) {
        const config = injector.get(APP_CONFIG);
        config.s = 'd';
            ^^^^^ - Error:(14, 16) TS2339:Property 's' does not exist on type 'AppConfig'.
    }
}

edited Feb 19 '19 at 14:47

Tarik

76,703
82
229
338

answered Apr 16 '17 at 05:48

Max Koretskyi

93,980
52
302
446

3

What are exactly the benefits of using these injectionTokens instead of for example just importing constants. I understand these token can easily be mocked when testing? Other than that?? It's a lot of code for just sharing constants.. – Aico Klein Ovink Apr 05 '18 at 20:54
@AicoKleinOvink, it seems to be just a convention for a token related to providers in DI. If you need to use constants in your code outside of DI mechanism in Angular, just simply use constants – Max Koretskyi Apr 06 '18 at 06:09
@AngularInDepth.com - ('app.config') Is just a placeholder. app.config can be anything? It can be like let APP_CONFIG = new InjectionToken('types.config');?? – Hacker Jun 01 '18 at 09:25
@Hacker, yes, it's simply a text description – Max Koretskyi Jun 07 '18 at 17:40

Angular 2 OpaqueToken vs Angular 4 InjectionToken

1 Answers1

Linked