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

Posted 2023-03-13

【中文标题】在打字稿中带有参数类型的角度 ui-state

【英文标题】：Angular ui-state with params type in typescript

【发布时间】：2016-09-20 03:32:31

【问题描述】：

我知道的

当使用带有 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 使用的正确类型是什么？

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

【问题讨论】：

一些灵感如何使用 TS 和 angularJS here

@RadimKöhler 谢谢。我正在使用导入/导出类等。为了这个问题，我只是尽量保持简单。不过有用的链接。

在你得到答案之前只是一个提示...我正在使用class 和static $inject 符号...提示;)

@RadimKöhler 我在生产代码中使用class 和static $inject 表示法。但是，我仍然需要正确注释参数。我只是认为在这里使用它会增加不必要的混乱。

如果你能告诉我一些真实的.. 损坏的.. 代码（最好在 plunker）我会帮助你......尽我所能......换句话说...... sn-ps in你的问题我不清楚..不确定什么不起作用。我确实使用 UI-Router、TS 和 AngularJS……所以可以分享一些经验

【参考方案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;
    ...

【讨论】：

谢谢，我没有想到这个！

很高兴看到这一点，享受 UI-Router 和 TS ;)

【参考方案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找到。

【讨论】：

请编辑更多信息。不建议使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。