[英]Angular ui-state with params type in typescript
When using TypeScript with angular's ui state, I can provide "type assertion" with the UI-Router definitely typed library. 当使用具有angular的ui状态的TypeScript时,我可以使用UI-Router绝对类型库提供“类型断言”。
Using this, I can inject $state
and have code similar to the following 使用这个,我可以注入
$state
并具有类似于以下的代码
function myCtrl($state: ng.ui.IStateService){
// Some code
}
This gives me correct autocompletion/error reporting for $state
's methods. 这为
$state
的方法提供了正确的自动完成/错误报告。
So far, this is all fine. 到目前为止,这一切都很好。
When I try to access a property of params
like the following 当我尝试访问
params
的属性时,如下所示
function myCtrl($state: ng.ui.IStateService){
// Trying to access a property of $state.params
var example = $state.params.example;
}
I get an error saying: 我收到一个错误说:
Property 'example' does not exist on IStateParamsService
IStateParamsService上不存在属性“示例”
because quite rightly, TypeScript doesn't know about this property. 因为非常正确,TypeScript不知道这个属性。
Defining my own Interface that extends ng.ui.IStateService
定义我自己的扩展
ng.ui.IStateService
的接口
interface IMyState extends ng.ui.IStateService{
params: {
example: string;
};
}
Then set the type to my interface 然后将类型设置为我的界面
function myCtrl($state: IMyState){
var example = $state.params.example;
}
This gets rid of the error. 这摆脱了错误。
What is the correct type to use for $state
? $state
的正确类型是什么?
Should I be defining my own interface like in my example? 我应该在我的例子中定义自己的界面吗?
With Typescript, we really can easily extend a contract, coming with UI-Router
.d.ts . 使用Typescript,我们可以轻松地扩展合同,使用
UI-Router
.d.ts 。
So this is the original definition (UI-Router d.ts. file) : 所以这是原始定义(UI-Router d.ts.文件) :
// a state object
interface IStateService {
...
params: IStateParamsService;
...
// params
interface IStateParamsService {
[key: string]: any;
}
And we can just introduce into our custom .d.ts these lines 我们可以将这些行引入我们的自定义.d.ts
declare module angular.ui
{
export interface IStateParamsService { example?: string; }
}
And that will now give us ability to consume $state
and its params with example: 现在,这将使我们能够使用示例消耗
$state
及其params:
MyMethod($state: ng.ui.IStateService)
{
let x = this.$state.params.example;
...
$state.params
are of type IStateParamsService
and if you look at the type signature you can read that it is an indexable type . $state.params
的类型为IStateParamsService
,如果你查看类型签名,你可以读到它是一个可索引类型 。
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 所描述的
IStateParamsService
类型是
(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
". 这意味着,“你可以存储
any
类型的对象(一切都是any
),并通过键类型(或索引或你的名字,这是名称索引类型的来源)读取对象的类型string
” 。
here some code: 这里有一些代码:
// 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'];
more informations about interfaces and types can be found here . 有关接口和类型的更多信息可以在这里找到。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.