angularjs/angular.d.ts $routeConfig

[SebastianSchenk]

• I tried using the latest angularjs/angular.d.ts file in this repo and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• I want to talk about angularjs/angular.d.ts.
  • The authors of that type definition are cc/ @diegovilar

During the last changes of angular.d.ts the property $routeConfig of the IComponentOptions interface was removed. I don't really understand why, since it is the recommended way to define routes with the new component router (https://code.angularjs.org/1.5.5/docs/guide/component-router)

Could you re-include this property please?

[rvl]

@mmiszy removed it with the following reason:

They're not valid properties for components in pure AngularJS. They're an extension added by the Component Router. People who don't use the Component Router will surely find these properties confusing (I do). This should go to a separate typings file for the Component Router.

The thing is, $routeConfig doesn't appear in angularjs/angular-component-router.d.ts which means our projects no longer compile...

[typeofweb]

@rvl @SebastianSchenk As a workaround you can easily add it on your own in your project – you have some kind of custom.d.ts or shim.d.ts file, don't you?
And as it's been established, this property should be added to angular-component-router.d.ts because it's not part of angularjs – pull requests are welcome.

[rvl]

Thanks @mmiszy. The third option is to just keep the old version of angular.d.ts, which is what I'm going to do.

[mickeyvip]

While the issue with $routeConfig can be avoided by having custom.d.ts:

declare namespace angular {
    interface IComponentOptions {
        $routeConfig?: any[];
    }
}

I have another issue:

const MyComponent: IComponentOptions = {
    templateUrl: "my.component.html",
    $routeConfig: routeConfig,
    bindings: { $router: '<' },
    controllerAs: "model",
    controller: MyComponentController
};

$ tsc
src/modules/module.ts(14,36): error TS2345: Argument of type '{ templateUrl: string; $routeConfig: RouteDefinition[]; bindings: { $router: string; }; controlle...' is not assignable to parameter of type 'IComponentOptions'.
  Types of property 'bindings' are incompatible.
    Type '{ $router: string; }' is not assignable to type '{ [binding: string]: string; }'.
      Index signature is missing in type '{ $router: string; }'.

The workaround I use is declaring bindings with the required type signature:

const bindings: {[bindngs: string]: string} = { $router: '<' };
const MyComponent: IComponentOptions = {
    templateUrl: "my.component.html",
    $routeConfig: routeConfig,
    bindings: bindings,
    controllerAs: "model",
    controller: MyComponentController
};

[typeofweb]

What TypeScript version do you use @mickeyvip ? It sounds like a bug in TypeScript that I have mentioned here: #8150 (comment)
tl;dr: It should work fine in TS newer than 1.8.0, make sure you use the latest version.

[mickeyvip]

@mmiszy , I'm on 1.8.10

[typeofweb]

@mickeyvip are you sure that's the version you're using? I tested your code and I don't get any errors, as expected.
See on Playground

[mickeyvip]

@mmiszy, I just recreated the issue happening in my code.

Indeed, as you pointed out, when I have:

const MyComponent: IComponentOptions = {
    templateUrl: "my.component.html",
    $routeConfig: routeConfig,
    bindings: { $router: '<' },
    controllerAs: "model",
    controller: MyComponentController
};

it compiles OK.

But I had several code changes and extracted bindings into a const:

const bindings = { $router: '<' };
const MyComponent: IComponentOptions = {
    templateUrl: "my.component.html",
    $routeConfig: routeConfig,
    bindings: bindings,
    controllerAs: "model",
    controller: MyComponentController
};

And now the compilation fails, unless I have explicitly set type on cons bindings:

const bindings: {[bindngs: string]: string} = { $router: '<' };

Playground refactored

Am I doing something wrong here?

[typeofweb]

@mickeyvip thanks for a very detailed explanation :) You're not doing anything wrong here, and there's nothing wrong with angular.d.ts, it's just how TypeScript works… at for least for now. Your solution is correct and giving an explicit index type to your const bindings it's the right thing to do.
However, this behaviour will change to a more friendly one in the future, probably in TypeScript 2.0 – see microsoft/TypeScript#6041

[mickeyvip]

@mmiszy, thank you.

[kresli]

I know this is an old thread, but for whoever come over this again the above solution is wrong because you loosing types. The correct solution is

interface Bindings {
  $router:  IRouterService
}

class MyComponentController implements IComponentController, Bindings {
  constructor(
    private $router: IRouterService
   ){}
}

const bindings: { [K in keyof Bindings]: string} = {
  $router: '<'
}

[benyaminl]

I have a silly question, I install both @types/angular-route and @types/angular, but seems the angular.IComponentOptions only detect from the index.d.ts, is there any specific way to make it works with angular-component-router.d.ts definition? Thank you!

cc @mickeyvip @mmiszy (sorry for interuption).

EDIT : Ugh, seems I need to use

/// <reference path="../../../node_modules/@types/angular/index.d.ts" />
/// <reference path="../../../node_modules/@types/angular/angular-component-router.d.ts" />

On top of the files to have autocomplete... Sorry for interuption. Thank you