0

TypeScript で Angular 1.5.x を使用しています。リモート API にアクセスするには、restangular を使用します。要約として、これは私のシナリオです:

私のAPIには次のリソースがありますhttp://localhost:53384/api/timezones。その URL に動詞 GET を含むリクエストを送信すると、JSON 配列が返されます。

[
   {
      "code":"Dateline Standard Time",
      "name":"(UTC-12:00) International Date Line West"
   },
   {
      "code":"UTC-11",
      "name":"(UTC-11:00) Coordinated Universal Time-11"
   },
   {
      "code":"Hawaiian Standard Time",
      "name":"(UTC-10:00) Hawaii"
   }
]

TypeScript を使用したクライアント AngularJs アプリケーションでは、次のようになります。

restangularProvider である Restangular 構成: restangular.IProvider

restangularProvider.setBaseUrl("http://localhost:53384/api");

typescript を使用したクライアント側の TimeZone オブジェクト表現

module app.blocks {
    "use strict";

    export class TimeZone {
        public code: string;
        public name: string;
    }
}

Factory( restangular.IService ) は、restangularのすべての「タイムゾーン」リソースをラップします

module app.services {
    factory.$inject = ["Restangular"];

    function factory(restangular: restangular.IService): restangular.IElement {
        return restangular.all("timezones");
    }

    angular
        .module("app.services")
        .factory("app.services.TimeZonesRestangular", factory);
}

TimeZonesRestangularを使用して、Restangular 機能をラップし、非同期の方法でタイムゾーンを要求した人にチェーンされた promise を返すサービス

module app.services {
    "use strict";

    export interface IStaticDataService {
        getTimeZones(): ng.IPromise<app.blocks.TimeZone[]>;
    }

    class StaticDataService implements IStaticDataService {
        constructor(private timeZonesRestangular: restangular.IElement) {
        }

        public getTimeZones(): ng.IPromise<blocks.TimeZone[]> {
            return this.timeZonesRestangular.getList()
                .then((timeZones: blocks.TimeZone[]) => {
                    return timeZones;
                }, (restangularError: any) => {
                    throw "Error retrieving time zones. Status: " + restangularError.status;
                });
        }
    }

    factory.$inject = ["app.services.TimeZonesRestangular"];

    function factory(timeZonesRestangular: restangular.IElement): IStaticDataService {
        return new StaticDataService(timeZonesRestangular);
    }

    angular
        .module("app.services")
        .factory("app.services.StaticDataService", factory);
}

そして最後に、サービスを使用して「タイムゾーン」を非同期に取得するコントローラーで、このステートメントがあります

//..other controller things not relevant for this sample
this.staticDataService.getTimeZones()
      .then((timeZones: blocks.TimeZone[]) => {
            this.timeZones = timeZones;
       });

2つの問題があります:

  1. restangular の型定義 ( でインストールしましたtsd install restangular --resolve --save) は、 getTimeZones() メソッドの successCallback が であると教えてくれますpromiseValue: any[]。これは実際には配列であるため問題ありません。私はそれが TimeZone[] の配列であり、 typescript が を受け入れるため適切にコンパイルされると思っていましany[]たが、デバッグ時に successCallback が約束した値は TimeZone[] の配列ではないことがわかります。それは私が期待した特性 (codename) を持っていますが、他にも多くの relangular っぽいものを持っています。その配列内のオブジェクトは次のようになります (およびいくつかの関数)。

    {  
     "code":"Dateline Standard Time",
     "name":"(UTC-12:00) International Date Line West",
     "route":"timezones",
     "reqParams":null,
     "restangularized":true,
     "fromServer":true,
     "parentResource":null,
     "restangularCollection":false
    }
    

    https://github.com/mgonto/restangular/issues/150によると、私の応答が「再言語化」されたように見えます。私のように resangular に慣れていない人にとっては恐ろしい説明です. resangularizedの配列を表すために、 resangular 型定義のどのインターフェイスを使用すればよいですか? TimeZone[]

  2. TypeScriptで同様のことを達成する方法の例はありますか?

ありがとうございました。

4

1 に答える 1