在打字稿中带有参数类型的角度 ui-state

Question

我知道的

当使用带有 Angular 的 UI 状态的 TypeScript 时，我可以为 UI-Router 绝对类型库提供“类型断言”。

使用它，我可以注入$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;
}

我收到一条错误消息：

IStateParamsService 上不存在属性“示例”

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

我考虑过尝试：

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

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

然后将类型设置为我的界面

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

这消除了错误。

$state 使用的正确类型是什么？

我应该像我的例子那样定义我自己的界面吗？

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;
    ...

Answer 2

$state.params 属于 IStateParamsService 类型，如果您查看 the type signature，您可以读到它是 indexable type。

可索引类型有一个索引签名，描述了我们可以用来索引对象的类型，以及索引时对应的返回类型。

IStateParamsService的描述类型是

(key: string): any

这意味着“你可以存储any类型的对象（一切都是any）并通过键读取对象（或索引或​​你命名它，这是名称可索引类型的地方来自) 类型为string"。

这里有一些代码：

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

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

更多关于接口和类型的信息可以在here找到。