Question

我所知道的

当使用具有angular的ui状态的TypeScript时，我可以使用UI-Router明确类型化的库提供“type assertion”。

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

然后将类型设置为 my interface

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

这摆脱了错误。

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

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

Answer 1

使用Typescript，我们可以轻松扩展合约，// a state object interface IStateService { ... params: IStateParamsService; ... // params interface IStateParamsService { [key: string]: any; } .d.ts 。

所以这是原始定义（UI-Router d.ts. file）：

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

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

$state

现在，这将使我们能够以示例消费MyMethod($state: ng.ui.IStateService) { let x = this.$state.params.example; ...及其参数：

clear
f = @(x) (x(:,:,1) - 1).^2 + 5 * (x(:,:,2) - 1).^2;
[x, y] = meshgrid(-2:.05:2); 
q(:,:,1)=x;
q(:,:,2)=y;
z = f(q);
surf(x,y,z)

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。

类型为

我所知道的

问题

我考虑过尝试：

2 个答案: