ObservableArray in Typescript Interface

5 posts, 1 answers
  1. Marc
    Marc avatar
    27 posts
    Member since:
    Sep 2014

    Posted 09 Feb Link to this post

    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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 13 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Marc
    Marc avatar
    27 posts
    Member since:
    Sep 2014

    Posted 13 Feb in reply to Boyan Dimitrov Link to this post

    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

  4. Marc
    Marc avatar
    27 posts
    Member since:
    Sep 2014

    Posted 13 Feb in reply to Boyan Dimitrov Link to this post

    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

  5. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 15 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top