ObservableArray in Typescript Interface

[Marc]

How would you declare an ObservableArray in a TypeScript interface?

I would like to define interfaces for the json data that is going between the web app and the server.

Thanks

-marc

[Boyan Dimitrov]

Hello Marc,

 

In the following Use Kendo UI MVVM in TypeScript it is demonstrated how to define ObservableObject. Same pattern should work for your case with ObservableArray. 

 

Regards,
Boyan Dimitrov
Telerik by Progress

[Marc]

Hi Boyan:

Thank you for the response.  However, I know how to extend the ObservableObject and ObservableArray.  I don't think we are on the same page.

If I have the following class:

01.namespace ClaimManagerApp.Models.IdentityServer {
02.    export class Client extends kendo.data.ObservableObject {
03.        constructor() {
04.            super();
05.
06.            this.claims = new kendo.data.ObservableArray([]);
07.            this.clientSecrets = new kendo.data.ObservableArray([]);
08.        }
09.
10.         id: number;
11.         enabled: boolean = false;
12.         clientId: string;
13.         clientSecrets: kendo.data.ObservableArray;
14.         claims: kendo.data.ObservableArray;
15.    }
16.}

Since the data for this class comes from my server application, I want to define an interface as:

01.namespace ClaimManagerApp.Models.IdentityServer {
02.    export interface IClient {
03.         id: number;
04.         enabled: boolean;
05.         clientId: string;
06.         clientSecrets: [];
07.         claims: [];
08.    }
09.}

Can I just define clientSecrets and claims as an array in the interface?

Thanks

marc

[Marc]

Hi Boyan:

Thank you for the link.  I am already doing that. 

Below is a class similar to what I have defined in my code:

01./// <reference path="../../../scripts/_references.ts" />
02.
03.namespace App.Models {
04.    export class Client extends kendo.data.ObservableObject {
05.        constructor() {
06.            super();
07.
08.            this.claims = new kendo.data.ObservableArray([]);
09.            this.clientSecrets = new kendo.data.ObservableArray([]);
10.        }
11.
12.         id: number;
13.         enabled: boolean = false;
14.         clientId: string;
15.         clientSecrets: kendo.data.ObservableArray;
16.         clientName: string;
17.         claims: kendo.data.ObservableArray;
18.
19.    }
20.}

As the data for this class comes from my backend servers, I would like to define an interface for the class as follows:

01.namespace App.Models {
02.    export interfaces IClient {
03.         id: number;
04.         enabled: boolean = false;
05.         clientId: string;
06.         clientSecrets: [];
07.         clientName: string;
08.         claims: [];
09.    }
10.}

The issue I'm having is I don't know what data type definition to give for the properties that are ObservableArray. Can I just define them as arrays?

Thanks

-marc

[Boyan Dimitrov]

Hello Marc,

I am afraid that defining the properties as simple array ([]) will not work. Please set their type to kendo.data.ObservableArray type. 

Regards,
Boyan Dimitrov
Telerik by Progress