一段運作正常的Kendo UI JavaScript程式,搬到TypeScript後發生編譯錯誤,起火點在DataSourceOptions物件的group屬性:

            var x = new kendo.data.DataSource({
                data: [],
                group: {
                    field: "Boo", aggregates: [
                        { field: "Foo", aggregate: "sum" }
                    ]
                }
            });

錯誤訊息如下

Supplied parameters do not match any signature of call target:
    Types of property 'group' of types '{ data: any[]; group: { field: string; aggregates: { field: string; aggregate: string; }[]; [n: number]: kendo.data.DataSourceGroupItem; }; }' and 'kendo.data.DataSourceOptions' are incompatible:
        Type '{ field: string; aggregates: { field: string; aggregate: string; }[]; [n: number]: kendo.data.DataSourceGroupItem; }' is missing property 'concat' from type 'kendo.data.DataSourceGroupItem[]'.   

江湖經驗不足,沒能一眼看出錯誤原因,到官方論壇提問後才自己找出問題來源。is missing property 'concat'是關健字,通常發生於該傳陣列的地方卻給了一般物件。

查看kendo.all.d.ts(官方論壇可下載最新版),group的定義為DataSourceGroupItem[];

    interface DataSourceOptions<T extends kendo.data.Model> {
        aggregate?: DataSourceAggregateItem[];
        autoSync?: bool;
        batch?: bool;
        data?: any;
        filter?: any;
        group?: DataSourceGroupItem[];
        page?: number;
        pageSize?: number;

但依據API文件,group可為陣列或物件(如果只有一筆,可直接給設定物件),與TypeScript指定必須為DataSourceGroupItem[]有出入,如此可解釋為何JavaScript程式能跑,搬到TypeScript卻無法編譯。依我的理解,屬性型別不像函式可以多載,設定any的話就無法規範DataSourceGroupItem的設定屬性,或許這是Kendo UI RD的取捨吧!

既知原因,解決就是小事一椿,將物件改寫成單一元素陣列 group: [ { field: "boo", aggregates: [ { field: "foo", aggregate: "sum" } ] } ] 便一切OK囉~


Comments

Be the first to post a comment

Post a comment