如何更改我的 AngularJS 服务以使用 Typescript？答案

【问题标题】：How can I change my AngularJS service to use Typescript?如何更改我的 AngularJS 服务以使用 Typescript？
【发布时间】：2014-07-25 17:20:16
【问题描述】：

我有这项服务：

app.factory('utilityService', [
    '$http',
    '$angularCacheFactory',
    utilityService
]);

function utilityService(
    $http,
    $angularCacheFactory
    ) {

    var factory = {};

    factory.rowClicked = function ($index, collection) {
        var row = collection[$index];
        if (row.current) {
            row.current = false;
            return null;
        } else {
            collection.forEach(function (object) {
                object.current = false;
            });
            row.current = true;
            return $index;
        }
    };

    factory.isArrayAndNotEmpty = function (theArray) {
        var rc = typeof theArray !== 'undefined' && theArray.length > 0;
        return rc;
    };


    return factory;

}

Typescript 似乎可以识别一切正常，直到涉及到 rowClicked（以及我没有在此处显示以节省空间的所有其他功能）。对于这些，它给出了信息：

factory.rowClicked

The property rowClicked does not exist on value of type '{}'

【问题讨论】：

为什么不只使用一个类：youtube.com/watch?v=Yis8m3BdnEM&hd=1

标签： javascript angularjs typescript

【解决方案1】：

var factory = {};

TypeScript 从其初始值设定项推断factory 的类型。在这里，您已经说过 factory 没有成员，因此任何读取或写入其属性的尝试都会失败。

您可以简单地将factory 的类型更改为any：

var factory: any = {};

这将使读取或写入factory 的任何属性都有效，但这可能过于宽松。你也可以写出它的类型：

var factory: {
    rowClicked($index, collection);
} = <any>{};

如果您有 $index 和 collection 的类型，您可以进一步改进类型：

var factory: {
    rowClicked($index: MyIndexService, collection: MyRowCollectionType);
} = <any>{};

【讨论】：

非常感谢您的详细解释。你能告诉我 = {}; 是什么吗？意味着在您对工厂的定义的末尾？
因为{} 缺少声明类型的成员，所以必须将其“强制转换”为any 才能分配给变量
谢谢，现在我明白了。我更新了我的答案，向您展示我现在拥有的东西。最后一个问题。我可以将定义“rowClicked($index, collection);”、实际函数定义和返回合二为一，这样我什至不需要使用“工厂”这个词吗？

【解决方案2】：

您可以将 TypeScript 类用于服务，并且无需 TypeAssertions（或手动接口）即可获得更好的 TypeSafety。

您需要使用angular.service 而不是angular.factory。参考：https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

【讨论】：