Angular Ui-state With Params Type In Typescript

What I know When using TypeScript with angular's ui state, I can provide 'type assertion' with the UI-Router definitely typed library. Using this, I can inject $state and have code

Solution 1:

With Typescript, we really can easily extend a contract, coming with UI-Router.d.ts.

So this is the original definition (UI-Router d.ts. file):

// a state objectinterfaceIStateService {
    ...
    params: IStateParamsService;
    ...
// paramsinterfaceIStateParamsService {
    [key: string]: any;
}

And we can just introduce into our custom .d.ts these lines

declaremodule angular.ui
{
    exportinterface IStateParamsService { example?: string; }
}

And that will now give us ability to consume $state and its params with example:

MyMethod($state: ng.ui.IStateService)
{
    let x = this.$state.params.example;
    ...

Solution 2:

$state.params are of type IStateParamsService and if you look at the type signature you can read that it is an indexable type.

Indexable types have an index signature that describes the types we can use to index into the object, along with the corresponding return types when indexing.

The described type of IStateParamsService is

(key: string): any

which means something like, "you can store objects of type any(everything is an any) and read the objects by the key (or index or you-name-it, this is where the name indexable type comes from) of type string".

here some code:

// this gives us an object of type IStateParamsServiceletparams = $state.params;

// params is a indexable type// we want the object stored at index 'example'let example = params['example'];
// orlet example = $state.params['example'];

more informations about interfaces and types can be found here.