javascript - typescript 中带有参数类型的 Angular ui-state

Question

我所知道的

当使用 TypeScript 和 angular 的 ui 状态时，我可以为 UI-Router 确定类型库提供“类型断言”。

使用它，我可以注入(inject) $state 并获得类似于以下的代码

function myCtrl($state: ng.ui.IStateService){
    // Some code
}

这为我提供了 $state 方法的正确自动完成/错误报告。

到目前为止，这一切都很好。

问题

当我尝试访问 params 的属性时，如下所示

function myCtrl($state: ng.ui.IStateService){
    // Trying to access a property of $state.params
    var example = $state.params.example;
}

我收到一条错误消息:

Property 'example' does not exist on IStateParamsService

因为很正确，TypeScript 不知道这个属性。

我考虑过尝试:

定义我自己的扩展 ng.ui.IStateService

的接口(interface)

interface IMyState extends ng.ui.IStateService{
    params: {
        example: string;
    };
}

然后设置类型为我的接口(interface)

function myCtrl($state: IMyState){
    var example = $state.params.example;
}

这消除了错误。

$state 的正确类型是什么？

我应该像示例中那样定义自己的接口(interface)吗？

Answer 1

使用 Typescript，我们真的可以很容易地扩展一个契约，伴随着 UI-Router .d.ts。

所以这是原始定义(UI-Router d.ts. 文件):

// a state object
interface IStateService {
    ...
    params: IStateParamsService;
    ...
// params
interface IStateParamsService {
    [key: string]: any;
}

我们可以将这些行引入到我们的自定义 .d.ts 中

declare module angular.ui
{
    export interface IStateParamsService { example?: string; }
}

这将使我们能够通过示例使用 $state 及其参数:

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