Question

我在使用Typescript时遇到了一些困难。

如果我想使用这样的Javascript在AngularJS中建立工厂：

;(function () { 'use strict';

angular.module('mercuryServices')
    .factory('Ride', RideModelFactory);

RideModelFactory.$inject = [
    '$http',
    '$resource'
];

function RideModelFactory(
    $http,
    $filter,
    $resource
) {
    return {
        get : function() {
            return $http.get('/api/rides/');
        },
        save : function(
            rideData
        ) {
            //rideData.ridedate = $filter('date')(rideData.ridedate, "dd-MM-yyyy HH:mm:ss");
            console.log(rideData);
            return $http({
                method: 'POST',
                url: '/api/rides/',
                headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                data: $.param(rideData)
            });
        },
        delete : function(
            id
        )
        {
            return $http.delete("/api/rides/" + id);
        },
        update : function(
            id,
            rideEdit
        )
        {
            return $http({
                method: 'PATCH',
                url: '/api/rides/' + id,
                headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                data: $.param(rideEdit)
            });
        },
        show : function(
            id
        )
        {
            return $http.get('/api/rides/' + id);
        }
    }
}

})();

这将如何转换为Typescript？这是我到目前为止，但我收到错误：“Provider'RideModelFactory'必须从$ get factory方法返回一个值。”

module mercuryServices {
'use strict';

export interface IRideModelFactory
{
    Store(rideData: string[]);
}

export class RideModelFactory {

    public static $inject = [
        '$http'
    ];

    http: ng.IHttpService;

    constructor($http: angular.IHttpService) {
        this.http = $http;
    }

    Store(rideData: string[])
        {
            return{
                save: function(
                    rideData
                ){
                    console.log(rideData);
                    return this.http({
                        method: 'POST',
                        url: '/api/rides/',
                        headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                        data: $.param(rideData)
                    });
                }
            }
        }
}

angular.module('mercuryServices')
    .factory('RideModelFactory', RideModelFactory);

}

Answer 1

如果你只是想构建一个“服务”来暴露一些没有任何进一步能力的方法，我的建议就是使用角度服务。使用TypeScript时，就像声明类SampleService一样简单，并在角度模块中注册此构造函数，如下所示：

class SampleService {
  constructor(...) {}
  someMethod() {}
}
angular.module("sampleapp", [])
  .service("SampleService", SampleService)

Angular然后通过new你传递的函数创建一个服务实例。使用factory方法注册工厂时，情况并非如此。传递给factory的方法必须在调用时返回一个对象，如下所示：

function SomeFactoryFunction() {
  return {
    someMethod: function() {...}
  }
}

因此，如果您想使用工厂，则必须自己编写正确的工厂函数或实例化给定的类。这种方法的缺点是你必须重复依赖列表。

angular.module("sampleapp", [])
  .factory("SampleFactory", ($http) => new SampleFactory($http))

但除非你有一个工厂的特定原因，只需使用service并让angular实例化你的服务类。

我构建了一个小jsbin，显示了如何在角色工厂中使用TypeScript的不同方法：http://jsbin.com/walati/71/edit?html,js,output

如果您对使用工厂的更多细节感兴趣而不是常规服务，请参阅Todd Motto的这篇精彩文章：https://toddmotto.com/factory-versus-service

我的建议是在适当的地方使用类，而不是试图将所有内容都放入类中。您可以轻松编写一些类型很好的函数，它返回一个实现您在项目中定义的接口的对象。

http动作工厂AngularJS和打字稿

1 个答案: