Kendo Ui DataSource schema model in Typescript

Question

I have a kendo.data.Model in my Angular app that I'm converting to Typescript. The DataSource works fine until I add the Model definition to the schema.

Is there another syntax for defining models with a DataSource using Typescript Kendo?

The non-Typescript version was working fine.

var someModel = new kendo.data.Model({
     id: "id",
     fields: {
          id: { type: "string" },
          name: { type: "string", validation: { min: 1, required: true } },
          isActive: { type: "boolean" }
          }
     });

 var source = new kendo.data.DataSource({
       transport: {
            read: (options: any) => {
                 someService.getData(options.data).then(function (results) {
                      options.success(results.data);
                      });
                  }
            },
            schema: {
                model: someModel
            }});

Edit: the issue was I missed the "define" as in "kendo.data.Model.define({}). But in changing it, the problem moved and now I can't use the typed model in other code:

class Foo {
    someModelProp: kendo.data.Model;

    constructor() {
        this.someModelProp = kendo.data.Model.define({*see above code for fields*});
    }
}

I get the compile error on the "this.someModelProp =" line:

Type 'typeof Model' is not assignable to type 'Model'. Property '_defaultId' is missing in type 'typeof Model'.

I can change "someModelProp" to "any" but then I'm going away from using typed models, and that goes against the purpose of Typescript.

Answer 1

Maybe old but I was looking for same questions. If it helps, this works for me:

class Foo extends kendo.data.Model {
    private modelDef: typeof kendo.data.Model = kendo.data.Model.define({*see above code for fields*});
    private model: kendo.data.Model;
    private data: any;

    constructor() {
        super();
        this.model = new this.modelDef([]);
    }

    init(data: any): Foo {
        this.data = data;
        this.model = new this.modelDef(data);
        return this;
    }

    // Typescript properties
    get _Id(): number { return this.model.get('id'); }
    set _Id(value: number) { this.model.set('id', value); }

    get _Name(): number { return this.model.get('name'); }
    set _Name(value: number) { this.model.set('name', value); }
}

Important: use underscores for typescript properties or runtime error happens, just prove it and look at generated JavaScript ...

I hope this helps and if someone has a better solution, or any comment, thanks in advance!