37

AngularJS と TypeScript を使用しています。次のように、Typescript クラスを使用して AngularJS サービスを実装したいと考えています。

class HelloService {
    public getWelcomeMessage():String {
        return "Hello";
    }
}

angular.module('app.services.helloService', []).factory('helloService', () => {
    return new HelloService();
});

これは、次の JavaScript コードにコンパイルされます。

var HelloService = (function () {
    function HelloService() {
    }
    HelloService.prototype.getWelcomeMessage = function () {
        return "Hello";
    };
    return HelloService;
})();

angular.module('app.services.helloService', []).factory('helloService', function () {
    return new HelloService();
});

これにより、変数 HelloService でグローバル名前空間が汚染されますが、これは明らかに望ましくありません。(Chrome のコンソールを使用して、HelloService がオブジェクトであることを確認しました。) この問題を解決/回避するにはどうすればよいですか?

私は明白なことを試しました：

angular.module('app.services.helloService', []).factory('helloService', function () {
    class HelloService { ...} 
    return new HelloService();
});

しかし、それは私にコンパイルエラーを与えます(「予期しないトークン; 'ステートメント'が期待されます。」)。

私が考えることができる 1 つの可能な解決策は、TypeScript のインポートとエクスポートを何らかの形で使用することです。これにより、RequireJS が使用されます。これにより、おそらく定義関数内に HelloService がラップされ、HelloService によるグローバル スコープの汚染が回避されます。ただし、AngularJS アプリケーションで RequireJS を使用するのは今のところはしたくありません。なぜなら、AngularJS は私の用途には十分であり、複雑さが増すからです。

私の質問は、グローバル スコープを汚染しない TypeScript クラスを使用して AngularJS サービスを定義するにはどうすればよいですか?

4

4 に答える 4

15

実際にやり終えたことを提供する必要があります。

module MyModule {
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

    angular.module('app.services.helloService', []).factory('helloService', () => {
        return new HelloService();
    });
}

このように私は使用することができます

return new HelloService();

それ以外の

return new MyModule.HelloService();
于 2014-03-07T09:01:40.340 に答える
6

私には2つの解決策があります.1つ目はクラスベースの構文を提供し、2つ目はグローバルスコープに何も残しません...

グローバル スコープに 1 つのハンドルを追加するだけで、わずかに妥協できます (これは、現在 1 つのクラスしかないため、グローバル スコープに配置したくない複数のクラスがある場合に実際に当てはまります)。

次のコードは、モジュールのみをグローバル スコープに残します。

module MyModule {
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

    export class AnotherService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

}

angular.module('app.services.helloService', []).factory('helloService', () => {
    return new MyModule.HelloService();
});

angular.module('app.services.anotherService', []).factory('anotherService', () => {
    return new MyModule.AnotherService();
});

または、グローバル スコープに 1 つも残さないようにするには、クラス構文を避けて「プレーンな古い JavaScript」を使用できます。

angular.module('app.services.helloService', []).factory('helloService', () => {
    var HelloService = (function () {
        function HelloService() {
        }
        HelloService.prototype.getWelcomeMessage = function () {
            return "Hello";
        };
        return HelloService;
    })();

    return new HelloService();
});
于 2013-10-18T13:21:43.443 に答える