时间戳

首页 > 解决方案 > 打字稿转换从数据库返回到类

typescript - 打字稿转换从数据库返回到类

问题描述

我正在尝试使用 ionic 3.20.0 (Angular 5.2.10 && typescript ~2.6.2) 在离子应用程序中从我的提供者返回特定类型的数组

在我的提供者中，我有这个

export class vwOrderList {
    OrderSheetId: number;
    Pickup: DateTime;
    Orders: number;
    Items: number;
    Total: number;
    BilledAmt: number;
    get Done(): boolean {
        return this.Total == this.BilledAmt;
    }
}

@Injectable()
export class OrderSheetsProvider {

    getOrdersList() {
        return new Promise<Array<vwOrderList>>(resolve => {
            this.http.get('http://*****.elasticbeanstalk.com/odata/vwOrderLists').subscribe(data => {
                resolve(<Array<vwOrderList>>data["value"]);
            }, err => {
                console.log(err);
            });
        });
    }
}

odata 服务返回一个对象，其中数据包含在"value"属性中，如下所示：

{
    "@odata.context":"http://******.elasticbeanstalk.com/odata/$metadata#vwOrderLists","value":[
    {
      "OrderSheetId":1589,"Pickup":"2016-09-26T16:00:00Z","Orders":89,"Items":116,"Total":2349.54,"BilledAmt":2349.54
    },{
      "OrderSheetId":1921,"Pickup":"2016-12-14T10:00:00Z","Orders":142,"Items":204,"Total":3387.22,"BilledAmt":3387.22
    },{ ... more

在使用此信息的页面中，我有这个：

export class OrderListPage {
    dataSource: vwOrderList[];

    constructor(public navCtrl: NavController, public navParams: NavParams, public ordersProvider: OrderSheetsProvider) {
        this.getOrders();
    }
    getOrders() {
        this.ordersProvider.getOrdersList()
            .then(data => {
                this.dataSource = data;
            })
    }
}

起初我尝试将结果投射到使用返回的页面中。我尝试使用各种东西

// of course I didn't try these all at once, just one variation at a time
this.dataSource = data as vwOrderList[];
this.dataSource = data as Array<vwOrderList>;
this.dataSource = <Array<vwOrderList>>data;

我无法让这些工作中的任何一个工作，所以我修改了 promise 以包含 return type Promise<Array<vwOrderList>>。无论如何，这更有意义，因为在任何我想使用 vwOrderList 类型的地方，它都应该是那种类型。但这似乎也不起作用。

resolve(data["value"] as vwOrderList[]);
resolve(data["value"] as <Array<vwOrderList>>);
resolve(data["value"] as Array<vwOrderList>);
resolve(<Array<vwOrderList>>data["value"]);
resolve(Array<vwOrderList>data["value"]);
resolve(<Array<vwOrderList>>(data["value"]));

数据通过但作为对象数组而不是 vwOrderList 类型，当然，没有“完成”方法的吸气剂。

我该怎么做才能从我的提供者返回一个 vwOrderList 类型的数组？

TIA，迈克

标签： typescriptionic-frameworkcastingangular-promise

解决方案

事实证明，这种方式是行不通的，即使这样，也无济于事。Typescript 为人类在开发过程中保持数据正确并帮助智能感知提供了一种设计时便利。即使它在开发过程中进行了转换，转换为 JavaScript 也会删除转换，并且对象最终不会是我想要的类型。

我可以通过创建所需类型的数组并使用从数据库返回的元素在 foreach 中创建它们的实例来使其工作。当我尝试这个时，它工作正常（我得到了正确的类型）并且速度足够快。

getOrdersList() {
    return new Promise<Array<vwOrderList>>(resolve => {
        this.http.get('http://*****.elasticbeanstalk.com/odata/vwOrderLists').subscribe(data => {
            var result = vwOrderList[];
            foreach (var element in data['value']) {
                result.push(new vwOrderList(element)); // add a constructor to vwOrderList that takes the object
            }
            resolve(result);
        }, err => {
            console.log(err);
        });
    });
}

这并没有真正解决最终目标，即能够编写一个返回适当类型的单个函数，而不管类如何。我希望最终把它变成 < Array < T > >。打字稿不能那样工作。

麦克风

推荐阅读